Изменить Выбрать идентификатор списка, используя Loop

Question

В настоящее время у меня есть форма, которая может добавлять новые записи при нажатии с помощью javascript. Однако я хотел бы изменить идентификатор каждого последующего «дополнения»: например. Первый tbody имеет идентификатор «участника1», но следующий будет иметь идентификатор «участника2», восьмой «участник8» и т. Д.

Вот отрывок из моего основного файла:

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

Но это, кажется, работает только с одной записью, и не все из них.

Answer 1

Прежде всего, у вас есть <p> тег после тр и , что это не правильно: <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) 
} 

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

Это будет работать для вас, но я не буду рекомендовать этот метод

заменить все функции скопировано отсюда: How to replace all occurrences of a string in JavaScript?