更改选择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; 
    } 
});