使用循环更改选择列表ID

Question

I currently have a form that can add new entries on click using javascript. However, I would like to change the id of each subsequent "add-on": eg The first tbody has an id of "participant1", but the next one will have an id of "participant2", the eighth "participant8", and so forth.

Here is the excerpt from my main file:

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

And this is what I am currently attempting with my JS file:

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?");
    }
}

But this seems to only work with one entry, and not all of them.

Answer 1

First of all , you have a <p> tag after a tr and that's not correct: <p> cannot be a child of <tr> :

Here is How I'd do it:

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

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

This will work for you, but I will not recommend this method

replace all function copied from here: How to replace all occurrences of a string in JavaScript?