使用带有javascript的复选框添加/删除多行
add/remove multiple rows using checkbox with javascript
我一直在使用javascript。我想动态添加更多字段，我的问题是我想添加一行带有输入框的字段。在添加的行中，第一列包含复选框，第二列包含递增数字，第三列包含输入txtbox，第四列checkbox1，第五列包含输入txtbox1，第六列包含输入txtbox3。现在我的问题是，如何在第四列checkbox1、第五列txtbox1和第六列txtbbox3下添加动态第二行，同时保持与checkbox txtbox对齐？在添加的行中，如果可能的话，它必须有两个按钮，添加行和删除行。以下是运行但不希望的片段：
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var i=0;
i++;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 0;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name="chkbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
cell5.innerHTML = rowCount -1;
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox1[]";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox2[]";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.name = "txtbox3[]";
cell8.appendChild(element7);
}
function addVillageNames()
{
}
function removeVillageNames()
{
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="Untitled-2" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<TD width="22" rowspan="2"><INPUT type="checkbox" name="chk"/></TD>
<TD width="12" rowspan="2"> 1 </TD>
<TD width="149" rowspan="2"> <INPUT type="text" name="txtbox[]" /> </TD>
<TD width="20"><INPUT type="checkbox" name="chk1"/></TD>
<TD width="12"> 1 </TD>
<TD width="200"> <INPUT type="text" name="txtbox1[]" /></TD>
<TD width="146"> <INPUT type="text" name="txtbox2[]" /> </TD>
<TD width="188"> <INPUT type="text" name="txtbox3[]" /> </TD>
</TR>
<tr>
<TD width="20"> </TD>
<TD width="12"> </TD>
<TD><input type="button" value="Add Row1" onClick="addRow1('dataTable')" /> <input type="button" value="Delete Row1" onClick="deleteRow1('dataTable')" /></TD>
<TD width="146"> </TD>
<TD width="188"> </TD>
</TR>
</TABLE>
<tr>
<td>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" /> </td></tr>
</form>
</BODY>
</HTML>
尽管我非常喜欢纯/香草的javascript，但我不得不为您的下一个项目推荐jQuery。这里有一个只使用普通javascript的jsfiddle代码。
以下是需要的JavaScript函数
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|''s)" + cssClass + "(''s|$)").test(el.className);
}
var rowNumber = 1;
function addRow(tableID) {
var counter = document.getElementById(tableID).rows.length-1;
var row = document.getElementById(tableID);
var newRow0 = row.rows[1].cloneNode(true);
var newRow1 = row.rows[counter].cloneNode(true);
// Increment
rowNumber ++;
newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
// Update the child Names
var items = newRow0.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var refRow = row.getElementsByTagName('tbody')[0];
refRow.insertBefore(newRow0, refRow.nextSibling);
refRow.insertBefore(newRow1, refRow.nextSibling);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var i = table.rows.length - 1;
while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
table.deleteRow(i)
i--;
}
if (2 < i) {
table.deleteRow(i)
rowNumber --;
}
}
function addChildRow(e, tableID) {
var table = document.getElementById(tableID);
var newRow = table.rows[0].cloneNode(true);
// Increment
if (e > 0)
if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML))
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
else
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
// Update the child Names
var items = newRow.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
var parent = table.rows[i].getElementsByTagName('td');
parent[0].rowSpan = counter+2;
parent[1].rowSpan = counter+2;
parent[2].rowSpan = counter+2;
var refRow = table.getElementsByTagName('tr')[e-1];
refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}
function deleteChildRow(e, tableID) {
var table = document.getElementById(tableID);
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
if (e-1 > i)
table.deleteRow(e-1)
}
这是HTML
<form action="Untitled-2.php" name="dataTable" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr class="row-parent">
<td width="22" rowspan="2">
<input type="checkbox" name="chk" />
</td>
<td width="12" rowspan="2">1</td>
<td width="149" rowspan="2">
<input type="text" name="txtbox[]" />
</td>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="12"> </td>
<td>
<input type="button" value="+ Child Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
<input type="button" value="- Child Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
</td>
<td width="146"> </td>
<td width="188"> </td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
下面是隐藏第一行的CSS：
table tr:first-child {
display: none;
}
相关文章：
- 根据Select值添加/删除表行
- 添加/删除类淡入淡出不起作用
- p5.js声音库:如何添加/删除p5.第5页中的短语(）.零件(）
- 在django表单集中添加/删除表单的Javascript
- 添加/删除子元素
- 添加/删除/更改输入文本的部分值
- jQuery - 添加删除类 - 设置输入值
- 向具有唯一Id的表添加/删除行
- DateTimePicker:函数从minDate maxDate添加删除日期
- 由 JavaScript 控制的 CSS3 单向转换在按顺序添加/删除类时不起作用
- 添加/删除类在 Chrome 中对我不起作用
- JQuery 测试元素是可见的还是隐藏的，然后添加删除类
- Jquery切换和添加/删除
- 克隆字段上的“添加-删除”按钮
- (X-Editable）与(Select2标签）不工作，可以't填充当前标签并跟踪添加/删除的标签
- 添加/删除要与Jquery进行比较的产品
- 添加/删除类并使用Cookie记住所选内容
- 如何使用延迟添加/删除类
- 如何根据数组内容添加/删除数组中的元素
- 单击单选按钮，添加/删除表单元素的类
