更改選擇ID與循環

Question

我目前有一種形式，可以添加新的條目使用JavaScript點擊。但是，我想更改每個後續「附加」的ID：例如第一個tbody的id爲「participant1」，但下一個會有「participant2」的id，第八個「participant8」等等。

這裏是我的主文件摘錄：

<fieldset class="row2"> 
    <legend>List of Participants</legend> 
    <p> 
     <input type="button" value="Add Participant" onclick="addRow('dataTable')" /> 
     <input type="button" value="Clear Participants" onclick="deleteRow('dataTable')" /> 
     <p>(All acions apply only to entries with check marked check boxes only.)</p> 
    </p> 
    <table id="dataTable" class="form" border="1"> 
     <tbody> 
      <tr> 
       <p> 
        <td> 
         <input type="checkbox" required="required" name="chk[]" checked="checked" /> 
        </td> 
        <td> 
         <div>Participant: </div> 
         <select name="participant1" id="participant1"> 
          <option>Person A</option> 
          <option>Person B</option> 
          <option>Person C</option> 
         </select> 
        </td> 
       </p> 
      </tr> 
     </tbody> 
    </table> 
    <div class="clear"></div> 
</fieldset> 

，這裏是什麼我目前正在與我的JS文件嘗試：

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if (rowCount < 50) { 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for (var i = 0; i < colCount; i++) { 
      var newcell = row.insertCell(i); 
      //newcell.id="participant"+ rowCount; 
      var cellBody = table.rows[0].cells[i].innerHTML; 
      newcell.innerHTML = replaceAll(cellBody, 'participant1', 'participant' + (rowCount + 1)); 
      console.log(rowCount, newcell.innerHTML) 
     } 
    } 
    else { 
     alert("More than 50 Participants? Are you sure?"); 
    } 
} 

function replaceAll(str, find, replace) { 
    var i = str.indexOf(find); 
    if (i > -1) { 
     str = str.replace(find, replace); 
     i = i + replace.length; 
     var st2 = str.substring(i); 
     if (st2.indexOf(find) > -1) { 
      str = str.substring(0, i) + replaceAll(st2, find, replace); 
     } 
    } 
    return str; 
} 

但這似乎只在一個參與者服用？

Answer 1

您可能正在收到JavaScript錯誤。可能需要將這些函數包裝在某種準備就緒的事件中。

這裏的小提琴工作，但只使用jquery及其文檔準備檢查。

http://jsfiddle.net/brettwgreen/17om5xpm/

我也建議你使用（a）的jQuery和（b）knockout.js。

一旦你開始使用基因敲除或類似的JS框架這種事情，你永遠不會回頭。

JS：

$(document).ready(function() { 
    window.addRow = function addRow(tableID) { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     if(rowCount < 50){       
      var row = table.insertRow(rowCount); 
      var colCount = table.rows[0].cells.length; 
      console.log(colCount); 
      for(var i=0; i<colCount; i++) { 
       var newcell = row.insertCell(i); 
       //newcell.id="participant"+ rowCount; 
       var cellBody = table.rows[0].cells[i].innerHTML; 

       newcell.innerHTML = replaceAll(cellBody, 'participant1' , 'participant' + (rowCount+1)); 
       console.log(rowCount, newcell.innerHTML) 
      } 
     } 
     else { 
      alert("More than 50 Participants? Are you sure?"); 
     } 
    } 


    window.replaceAll = function replaceAll(str, find, replace) { 
     var i = str.indexOf(find); 
     if (i > -1) { 
      str = str.replace(find, replace); 
      i = i + replace.length; 
      var st2 = str.substring(i); 
      if(st2.indexOf(find) > -1) { 
       str = str.substring(0,i) + replaceAll(st2, find, replace); 
      }  
     } 
     return str; 
    } 
});