使用带有javascript的复选框添加/删除多行
我一直在使用我正在使用的javascript。我想动态添加更多字段，我的问题是我想能够添加一行输入框。在添加的行中，第一列包含复选框，第二列包含增量编号，第三列包含输入txtbox，第四列包含checkbox1，第五列包含输入txtbox1，第六列包含输入txtbox3。现在我的问题是，如何在第四列checkbox1、第五列txtbox1和第六列txtbox3下添加dynamicaly第二行，同时保持与checkbox、txtbox的对齐？ 在添加的行中，如果可能，它必须有两个按钮，添加行和删除行。 以下是运行但不希望出现的代码段：使用带有javascript的复选框添加/删除多行,javascript,Javascript,我一直在使用我正在使用的javascript。我想动态添加更多字段，我的问题是我想能够添加一行输入框。在添加的行中，第一列包含复选框，第二列包含增量编号，第三列包含输入txtbox，第四列包含checkbox1，第五列包含输入txtbox1，第六列包含输入txtbox3。现在我的问题是，如何在第四列checkbox1、第五列txtbox1和第六列txtbox3下添加dynamicaly第二行，同时保持与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>
在HTML表中添加/删除动态行
函数addRow（tableID）{
var i=0；
i++；
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var cell1=行插入单元格（0）；
var element1=document.createElement（“输入”）；
element1.type=“复选框”；
element1.name=“chkbox[]”；
单元格1.附加子元素（元素1）；
var cell2=行插入单元格（1）；
cell2.innerHTML=rowCount+0；
var cell3=行插入单元格（2）；
var element2=document.createElement（“输入”）；
element2.type=“text”；
element2.name=“txtbox[]”；
第三单元附属物（第二单元）；
var cell4=行插入单元格（3）；
var element4=document.createElement（“输入”）；
element4.type=“复选框”；
element4.name=“chkbox[]”；
第四单元附属物（第四单元）；
var cell5=行插入单元格（4）；
cell5.innerHTML=rowCount-1；
var cell6=行插入单元格（5）；
var element5=document.createElement（“输入”）；
element5.type=“text”；
element5.name=“txtbox1[]”；
第六单元附属物（第五单元）；
var cell7=行插入单元格（6）；
var element6=document.createElement（“输入”）；
element6.type=“text”；
element6.name=“txtbox2[]”；
第七单元附属物（第六单元）；
var cell8=行插入单元格（7）；
var element7=document.createElement（“输入”）；
element7.type=“text”；
element7.name=“txtbox3[]”；
第8单元附属物（第7单元）；
}
函数addVillageNames（）
{
}
函数removeVillageNames（）
{
}
函数deleteRow（tableID）{
试一试{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
对于（var i=0；i来说，尽管我非常喜欢普通/普通javascript，但我还是必须为您的下一个项目推荐jQuery
下面是您需要的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)
}
你可以贴一把小提琴吗？你可以只在thead
/tbody
/tfoot
上添加行
而不是任何列…我把它粘贴到小提琴上，看起来有点破了。@RonnieNasso这就是你要找的吗？@GrahamWalters。不，如果你运行上面提供的代码片段，它会让你知道我需要什么。嗯，我需要要在一行上添加输入文本框。在列左侧的第一个输入框上作为父项，在右侧的第二个输入框上作为子项。我的问题是，我如何才能将父项文本框与子项文本框一起添加，而子项文本框将仅具有用于子项文本框的“添加和删除”按钮，并且与仅用于父文本框的添加和删除按钮相同。它可以工作，在复选框上，我希望它们工作，以便用户可以删除位于其他输入字段中间的输入字段。目前，用户必须删除所有输入字段，才能进入必须删除的实际字段。我注意到您建议使用jquery实现而不是javascript，我不太熟悉jquery，如果可能的话，这将是个好主意。
<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>
table tr:first-child {
display: none;
}