Change Select list ID using Loop

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": e.g. 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.

score 0 · Answer 1 · answered May 13 '15 at 14:25

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

score 0 · Answer 2 · edited May 23 '17 at 12:21

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?

Change Select list ID using Loop

2 Answers2