使用循环更改选择列表 ID答案

【问题标题】：Change Select list ID using Loop使用循环更改选择列表 ID
【发布时间】：2015-05-13 13:19:21
【问题描述】：

我目前有一个表单，可以使用 javascript 在点击时添加新条目。但是，我想更改每个后续“附加组件”的 id：例如第一个 tbody 的 id 为“participant1”，但下一个 tbody 的 id 为“participant2”，第八个为“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 j=1;
    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"+ j;
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            j++;
        }
    }else{
       alert("More than 50 Participants? Are you sure?");
    }
}

但这似乎只适用于一个条目，而不是所有条目。

【问题讨论】：

标签： javascript html forms function for-loop

【解决方案1】：

首先，在 tr 和这是不正确的：<p> 不能是 <tr> 的孩子：

我会这样做：

function addNewRow(tableID) {
var j=1;
var table = document.getElementById(tableID);
var tbody = table.getElementsByTagName('tbody')[0];
var rowCount =  table.rows.length;


if(rowCount < 50){ 
   var rowId =rowCount+1;   
   var row = document.createElement('tr');
   row.id ='row-participant'+rowId;
   var td1 =       document.createElement('td');
   var td2 =       document.createElement('td');
   var input =     document.createElement('input');
   input.type='checkbox';
   input.checked = true;
   input.id='checkbox'+rowId;
   input.name ='chk'+rowId+'[]';
   td1.appendChild(input);
   var select =        document.createElement('select');
   select.id='participant'+rowId;
       select.options[select.options.length] = new Option('PERSON A','A');
       select.options[select.options.length] = new Option('PERSON B','B');
       select.options[select.options.length] = new Option('PERSON B','C');
       td2.appendChild(select);
       row.appendChild(td1);
       row.appendChild(td2);
       tbody.appendChild(row);
   // var row = table.insertRow(rowCount);

}else{
   alert("More than 50 Participants? Are you sure?");
}
}


function deleteRow(tableID){
var table = document.getElementById(tableID);
var rowCount =  table.rows.length;
if(rowCount===1){
alert('no rows to delete ');
return false;
}

var tbody= table.getElementsByTagName('tbody')[0];
var lastOne = tbody.lastChild;

tbody.removeChild(lastOne)
}

【讨论】：

【解决方案2】：

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;
}

这对你有用，但我不推荐这种方法

替换从这里复制的所有函数： How to replace all occurrences of a string in JavaScript?

【讨论】：