根據計數重複錶行並分配唯一標識

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文件中讀取它們作爲數組。上的jsfiddle

$('#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>"; 
    } 

}); 

工作示例：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」