【发布时间】：2017-12-01 17:16:04
【问题描述】：
我有一个用 HTML 编写的表单。在这种形式中，有 2 个按钮和一个表格。表格中的每一行都包含一个复选框和 2 个文本字段。
按钮用于在表格中添加和删除行。删除按钮仅适用于选中其复选框的行。他们有一个onClick 方法，它指的是在下面的<script> 标记上用JavaScript 编写的2 个方法，addRow(tableID) 和deleteRow(tableID)。
addRow(tableID) 在我单击它的按钮时起作用，但当我单击删除按钮时没有任何反应，它指的是deleteRow(tableID) 方法。
这是表单的代码：
<form action="Page2.php" method="post" enctype="multipart/form-data">
<!-- Contacts Details -->
<p>
<input type="button" value="Add Contact" onClick="addRow('contacts')" />
<input type="button" value="Remove Contact" onClick="deleteRow('contacts')" />
<p>(All actions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="contacts" class="form" border="1">
<tbody>
<tr>
<p>
<td>
<input type="checkbox" name="chk[]" checked="checked" />
</td>
<td>
<label>Address</label>
<input type="text" name="ADDRESS[]" />
</td>
<td>
<label for="PHONE_NUMBER">Phone Number</label>
<input type="text" class="small" name="PHONE_NUMBER[]" />
</td>
</p>
</tr>
</tbody>
</table>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 10) {
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("Maximum Contacts Number is 10");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
debugger;
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) {
alert("Cannot Remove all Contacts");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
<!-- Form Sending -->
<input type="submit" value="Proceed">
</form>编辑#！：
我刚刚调试了上面的代码，发现deleteRow(tableID)方法中的变量chkbox和row在调试器中显示为undefined。
我能做些什么来解决这个问题？
【问题讨论】：
-
不要同时问两个问题。 Border 设置为 1 应该是一个单独的问题，这样它就可以被搜索并帮助其他人。此外，您应该有一个工作示例。最后，正如 Liam 提到的，您进行了哪些调试？
-
我编辑了您的代码以包含调试器语句。在打开开发工具的情况下运行它，你会发现问题所在。检查您的
chkbox变量。如果您之前从未调试过，请参阅 Liam 的链接 stackoverflow.com/questions/988363/… -
您是否尝试过我的建议？我的评论实际上告诉你问题出在哪里。如果你这样做了，你应该编辑你的问题，展示你如何调试它以及你当前面临的问题。 Stack Overflow 不是让别人为你调试你的代码，你必须证明你已经完成了至少某种程度的调试。真的，我已经回答了你的问题，但我正在推动你学习如何自己解决这个问题。一旦你添加了你所做的调试，我很高兴投票重新打开，但我很确定如果你按照我的提示，你会自己解决。
-
@JuanMendes 我刚刚调试了一下，发现变量
chkbox和row是未定义的。我会将其添加到问题中，如果您重新打开问题，我将感谢您。 -
row is not undefined.... chkbox is not undefined... 听起来不像您实际调试过它。
标签： javascript html forms html-table rows