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:
[code=html]<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 here is the excerpt from my JS File:
[CODE]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;
}
But this appears to only be taking in one participant?