[英]Changing ID Dynamically in Select list using Loop
I currently have a form that can add new entries on click using javascript. 我目前有一个可以在使用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.
但是,我想更改每个后续“附加组件”的ID:例如,第一个tbody的ID为“ participant1”,而下一个tbody的ID为“ participant2”,第八个为“ participant8”,并且等等。
Here is the main file: 这是主文件:
<body>
<form action="process" class="register" method="POST">
<h1>Add Participants</h1>
<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>
<input class="submit" type="submit" value="Confirm »" />
<div class="clear"></div>
</form>
</body>
And here is the JS Function: 这是JS函数:
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.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("More than 50 Participants? Are you sure?");
}
}
HTML Code HTML代码
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>test</title>
</head>
<body>
<form action="process" class="register" method="POST">
<h1>Add Participants</h1>
<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>
<input class="submit" type="submit" value="Confirm »" />
<div class="clear"></div>
</form>
<script>
var j=1;
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"+ j;
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
j++;
}
}else{
alert("More than 50 Participants? Are you sure?");
}
}
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.