javascript - 根据计数复制表行并分配唯一的 ID

Question

因此，我需要根据我将传递网页的计数创建重复的表行。例如，如果计数为 3，我需要在表标题下方添加 3 行。最好使用 JavaScript。

td 标签内有输入标签，供用户进行更改然后最终提交，因此如果可能的话，我希望为每个输入标签创建唯一的 id。以下是我所拥有的。

<div id="container">
<form id='associates'>
<table border="1"><tr>
 <th>Assoc Name</th>
 <th>Role</th>
 <th>Agile Team</th>
 <th>Agile Team 2</th>
 <th>Agile Team 3</th>
 <th>Agile Team 4</th>
 <th>Agile Team 5</th></tr>
<tr>
 <td ><input id='name' readonly value='Jordan Davis'></td>
 <td ><input id='role' readonly value='Business Analyst'></td>
 <td >  <select id ='team1'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select></td>
 <td ><select  id='team2'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select>  </td>
<td ><select id='team3'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select>  </td>
<td ><select id='team4'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select>  </td>
<td ><select id='team5'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select>  </td>
</form></div>

Answer 1

据我所知，您传递了一个数字，并根据该数字动态创建表行。到目前为止一切都很好，对于不同的标签 id，您可以传递输入值数组，因此您不需要每次添加行时都创建唯一的 id。

看一下 JavaScript 代码段:如您所见，我传递了输入元素数组，您可以在 PHP 文件上以数组形式读取它们。

$('#addRows').click(function(){
  var rows = $('input').val();
  var table = document.getElementById('persons');
  var length = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;


  for(i=0;i<rows;i++){
    console.log('ddd');
   var row = table.insertRow(length+1);//add row at the end
   //create cells
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   var cell4 = row.insertCell(3);
   var cell5 = row.insertCell(4);
   var cell6 = row.insertCell(5);
   var cell7 = row.insertCell(6);
   //ad values to cells"
    cell1.innerHTML = "<input name='firstname[]'  placeholder='name here'>";
    cell2.innerHTML = "<input name='role[]'  placeholder='role here'>";
    cell3.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
    cell4.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
     cell5.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
     cell6.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
     cell7.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
  }

});

jsfiddle 上的工作示例:http://jsfiddle.net/tornado1979/vq9pemd6/

希望有帮助，祝你好运。