Question

所以我需要根据我将通过网页的计数创建重复的表行。因此，例如，如果计数为3，我需要在表头下方3行。 Javascript更可取。

td标签中包含输入标签，供用户进行更改然后最终提交，因此如果可能，我希望为每个输入标签创建unigue 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/

希望有所帮助，祝你好运。

Answer 2

你可以尝试这样的事情：

var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     
    hiddenInput.setAttribute("value", 'ID');
    hiddenInput.setAttribute("class", "ListItem");

$('body').append(hiddenInput);

您可以在循环中执行此操作，只需将当前索引附加到ID，例如，如果这是第三个循环，则id可以是“uniqueidentifier3”

基于计数重复表行并分配唯一ID

2 个答案: