如何在多行输入

Question

我正在尝试创建一个应用程序，它会通过连接三列信息自动创建项目名称和描述。

通过使用组合信息的Javascript函数连接每一行，但因为此函数使用元素ID工作，我当前必须为每行输入重新创建函数。

这个应用程序需要能够处理100行，所以我想知道是否有一种方法可以创建一个函数并在点击提交按钮后将其应用到每一行？

function method() {
  var input1 = document.getElementById("input1").value
  var input2 = document.getElementById("input2").value
  var input3 = document.getElementById("input3").value

  var description1 = '<b>Product Description</b><br><ul><li>' + 'Color: ' + input1 + '</li><li>' + 'Fabric: ' + input2 + '</li></ul>' +' Style:' + input3

  document.getElementById("description1").innerText = description1

  var name1 = input1 + ' ' + input2 + ' ' + input3
  document.getElementById("name1").innerText = name1

  var input4 = document.getElementById("input4").value
  var input5 = document.getElementById("input5").value
  var input6 = document.getElementById("input6").value

  var description2 = '<b>Product Description</b><br><ul><li>' + 'Color: ' + input4 + '</li><li>' + 'Fabric: ' + input5 + '</li></ul>' +' Style:' + input6

  document.getElementById("description2").innerText = description2

  var name2 = input4 + ' ' + input5 + ' ' + input6
  document.getElementById("name2").innerText = name2

  var input7 = document.getElementById("input7").value
  var input8 = document.getElementById("input8").value

  var input9 = document.getElementById("input9").value

  var description3 = '<b>Product Description</b><br><ul><li>' + 'Color: ' + input7 + '</li><li>' + 'Fabric: ' + input8 + '</li></ul>' +' Style:' + input9

  document.getElementById("description3").innerText = description3

  var name3 = input7 + ' ' + input8 + ' ' + input9
  document.getElementById("name3").innerText = name3

  var input10 = document.getElementById("input10").value
  var input11 = document.getElementById("input11").value
  var input12 = document.getElementById("input12").value

  var description4 = '<b>Product Description</b><br><ul><li>' + 'Color: ' + input10 + '</li><li>' + 'Fabric: ' + input11 + '</li></ul>' +' Style:' + input12

  document.getElementById("description4").innerText = description4

  var name4 = input10 + ' ' + input11 + ' ' + input12
  document.getElementById("name4").innerText = name4
}

<table id="table">
	<button type="button" onclick="method()">Submit</button>
  <thead>
    <tr>
      <th>Colour</th>
      <th>Fabric</th>
      <th>Style</th>
      <th>Item Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input id="input1" placeholder="input"></td>
      <td><input id="input2" placeholder="input"></td>
      <td><input id="input3" placeholder="input"></td>
      <td><output id="name1"></output></td>
      <td><output id="description1"></output></td>
    </tr>
    <tr>
      <td><input id="input4" placeholder="input"></input></td>
      <td><input id="input5" placeholder="input"></input></td>
      <td><input id="input6" placeholder="input"></input></td>
      <td><output id="name2"></output></td>
      <td><output id="description2"></output></td>
    </tr>
    <tr>
      <td><input id="input7" placeholder="input"></input></td>
      <td><input id="input8" placeholder="input"></input></td>
      <td><input id="input9" placeholder="input"></input></td>
      <td><output id="name3"></output></td>		
      <td><output id="description3"></output></td>
    </tr>
    <tr>
      <td><input id="input10" placeholder="input"></input></td>
      <td><input id="input11" placeholder="input"></input></td>
      <td><input id="input12" placeholder="input"></input></td>
      <td><output id="name4"></output></td>
      <td><output id="description4"></output></td>
    </tr>
  </tbody>
</table>

Answer 1

克利夫，

使用一种称为循环的聪明编程技术肯定是可行的。

首先，将每个输入命名为自己的名字。例如：

所有颜色都是：colour1，colour2，colour3，...

所有面料将是：fabric1，fabric2，fabric2，...

并且，所有样式都将是：style1，style2，style3，...

对您的描述和名称执行相同的操作。

之后，我们可以使用for循环来实现这个目标：

var numTotal = 3
for (i = 1; i < numTotal+1; i++) { 

     var input1 = document.getElementById("colour" + i).value
     var input2 = document.getElementById("fabric" + i).value
     var input3 = document.getElementById("style" + i).value

     var description = '<b>Product Description</b><br><ul><li>' + 'Color: ' + 
     input1 + '</li><li>' + 'Fabric: ' + input2 + '</li></ul>' +' Style:' + input3

     document.getElementById("description" + i).innerText = description

     var name = input1 + ' ' + input2 + ' ' + input3

     document.getElementById("name" + i).innerText = name

 }

如果您想了解有关JavaScript中不同类型循环的更多信息，我建议您查看本教程：https://www.w3schools.com/js/js_loop_for.asp。

最佳，

Dhvani

Answer 2

使用循环：

var inputs = document.querySelectorAll('input');

＆＃13;

＆＃13;

function method(){
    // Get all input elements from your site, using document.querySelectorAll
    var inputs = document.querySelectorAll('input');
    // Loop through them, increment by 3 since you have 3 inputs per row
    for(var i = 0; i < inputs.length; i+=3){
        // take the 3 inputs you need to generate your values with the loop-index i
        var name = inputs[i].value + inputs[i+1].value + inputs[i+2].value;
        var description = '<b>Product Description</b><br><ul><li>' + 'Color: ' + inputs[i].value + '</li><li>' + 'Fabric: ' + inputs[i+1].value + '</li></ul>' + ' Style:' + inputs[i+2].value;
        //  to get the correct description id, take the index, divide it by 3 and round up
        document.getElementById("description" + Math.ceil((i+1)/3)).innerHTML = description;
        document.getElementById("name" + Math.ceil((i+1)/3)).innerHTML = name;
        
    }
}

＆＃13;

<table id="table">
	<button type="button" onclick="method()">Submit</button>
        <thead>
            <tr>
                <th>Colour</th>
                <th>Fabric</th>
                <th>Style</th>
		<th>Item Name</th>
		<th>Description</th>
        </thead>
        <tbody>
            <tr>
                	<td><input id="input1" placeholder="input"></td>
			<td><input id="input2" placeholder="input"></td>
			<td><input id="input3" placeholder="input"></td>
			<td><p id="name1"></p></td>
			<td><p id="description1"></p></td>
			
            </tr>
            <tr>
			<td><input id="input4" placeholder="input"></td>
			<td><input id="input5" placeholder="input"></td>
			<td><input id="input6" placeholder="input"></td>
			<td><p id="name2"></p></td>
			<td><p id="description2"></p></td>

            </tr>

        </tbody>
    </table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

也许是这样的：

＆＃13;

＆＃13;

function new_method(){
	/* selector part of id */
 var count_of_names = document.querySelectorAll('[id^="name"]').length;
 var cur_num=0;
 for (var i = 0; i < count_of_names; i++) {
 	  cur_num++;
    var input1 = document.getElementById('input'+cur_num).value;
      cur_num++;
    var input2 = document.getElementById('input'+cur_num).value;
      cur_num++;
    var input3 = document.getElementById('input'+cur_num).value;

    var description = '<b>Product Description</b><br><ul><li>' + 'Color: ' + input1 + '</li><li>' + 'Fabric: ' + input2 + '</li></ul>' +' Style:' + input3;
    document.getElementById('description'+(i+1)).innerText = description;
    var name = input1 + ' ' + input2 + ' ' + input3;
    document.getElementById('name'+(i+1)).innerText = name;
 }

}

＆＃13;

<table id="table">
	<button type="button" onclick="new_method();">Submit</button>
        <thead>
            <tr>
                <th>Colour</th>
                <th>Fabric</th>
                <th>Style</th>
		<th>Item Name</th>
		<th>Description</th>
        </thead>
        <tbody>
            <tr>
                	<td><input id="input1" placeholder="input"></td>
			<td><input id="input2" placeholder="input"></td>
			<td><input id="input3" placeholder="input"></td>
			<td><output id="name1"></output></td>
			<td><output id="description1"></output></td>

            </tr>
            <tr>
			<td><input id="input4" placeholder="input"></input></td>
			<td><input id="input5" placeholder="input"></input></td>
			<td><input id="input6" placeholder="input"></input></td>
			<td><output id="name2"></output></td>
			<td><output id="description2"></output></td>

            </tr>
            <tr>
			<td><input id="input7" placeholder="input"></input></td>
			<td><input id="input8" placeholder="input"></input></td>
			<td><input id="input9" placeholder="input"></input></td>
			<td><output id="name3"></output></td>
			<td><output id="description3"></output></td>


            </tr>
	     <tr>
			<td><input id="input10" placeholder="input"></input></td>
			<td><input id="input11" placeholder="input"></input></td>
			<td><input id="input12" placeholder="input"></input></td>
			<td><output id="name4"></output></td>
			<td><output id="description4"></output></td>

            </tr>
        </tbody>
    </table>

＆＃13;

＆＃13;

＆＃13;