我有嵌套的表父表和子表。如果需要，两个表都可以在单击按钮时添加行。我面临的问题是，当在父表中添加一行然后在该行中子表按钮不起作用时。它们适用于父表中第一行的子表，不适用于第二行。请参阅片段进行演示。
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
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) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function addRow1(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow1(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) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}table {
border-collapse: collapse;
width: 100%;
border:1px solid #1E90FF;
}
th, td {
text-align: left;
padding: 8px;
border:1px solid #1E90FF;
}
th {
background-color: #1E90FF;
color: white;
} <TABLE id="dataTable">
<thead>
<tr>
<th style="text-align: center;"> Select </th>
<th style="text-align: center;"> <b>Size</b> </th>
<th style="text-align: center;"> <b>Color & Quantity</b> </th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td><input type="checkbox" name="chk"/></td>
<td><select name="size[]" id="size" required="" >
<option value="">Select Size</option></select></td>
<td>
<TABLE style="margin-top: 20px;" id="dataTable1" width="400px" border="1">
<thead>
<th> Select </th>
<th> <b>Color Quantity</b> </th>
</thead>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>
<select name="color[]" required="" >
<option value="">Select Color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
</select>
<input type="number" name="dress_quantity[]" class="qty1" placeholder="Size Quantity" value="" required="">
</TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow1('dataTable1')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow1('dataTable1')" />
</td>
</tr>
</tbody>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />最佳答案
问题:
您正在将父行的 HTML 复制/克隆到子行，这反过来将父 ID(基于您的代码的第一行)分配给子行。
addRow 方法中导致问题的代码:
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
解决方案:
当您点击父表的 Add Row 按钮时，将不同的 ID 分配给新的子表和按钮。
将 addRow 方法中的以下行替换为:
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
到
if (i == colCount - 1) //last column which adds child table
{
//Get child table id of first row
var tableID = table.rows[1].cells[i].childNodes[1].getAttribute("id");
//Replace all occurances of parent table id's with new unique table id for child table before writing the information to DOM
newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(new RegExp(tableID,"g"), "dataTable" + Math.floor((Math.random() * 1000) + 1));
}
else //For other columns there is no need to assign unique id for controls
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
注意:我正在使用 Math.floor((Math.random() * 1000) + 1)) 生成随机数。您可能想要更改为您自己的逻辑。
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
if (i == colCount - 1) //last column
{
//Get child table id of first row
var tableID = table.rows[1].cells[i].childNodes[1].getAttribute("id");
newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(new RegExp(tableID,"g"), "dataTable" + Math.floor((Math.random() * 1000) + 1));
}
else
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
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) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
function addRow1(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow1(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) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
border: 1px solid #1E90FF;
}
th,
td {
text-align: left;
padding: 8px;
border: 1px solid #1E90FF;
}
th {
background-color: #1E90FF;
color: white;
}
</style>
<TABLE id="dataTable">
<thead>
<tr>
<th style="text-align: center;"> Select </th>
<th style="text-align: center;"> <b>Size</b> </th>
<th style="text-align: center;"> <b>Color & Quantity</b> </th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td><input type="checkbox" name="chk" /></td>
<td><select name="size[]" id="size" required="">
<option value="">Select Size</option></select></td>
<td>
<TABLE style="margin-top: 20px;" id="dataTable1" width="400px" border="1">
<thead>
<th> Select </th>
<th> <b>Color Quantity</b> </th>
</thead>
<TR>
<TD>
<INPUT type="checkbox" name="chk" />
</TD>
<TD>
<select name="color[]" required="">
<option value="">Select Color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
</select>
<input type="number" name="dress_quantity[]" class="qty1" placeholder="Size Quantity" value="" required="">
</TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow1('dataTable1')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow1('dataTable1')" />
</td>
</tr>
</tbody>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />关于javascript - 按钮上新添加的行在第二行不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46111276/