我键入的以下代码用于在html表中添加或删除行。当我单击添加按钮没有任何问题，但当我单击删除按钮，但我想删除特定行，我无法。我收到一条警告信息：
“无法读取属性`onclick` of null”
我该如何纠正这个问题？
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
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;
//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 (document.getElementById('button').onclick == true) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD>
<INPUT type="button" name="button" value=delete id=delete onclick="deleteRow('dataTable')">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
答案 0 :(得分：1)
我发现处理这类场景的最简单方法是使用类而不是id，以及使用上下文。 ID用作页面上项目的唯一标识符。因为您很可能在页面上有多个“删除按钮”，所以最好使用类名来定位它们。
所以，如果我是你，我会做的就是包含jQuery，它会让事情变得更简单。
在关闭正文标记之前在html文档中添加以下行。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
在“删除按钮”中添加“removeRowBtn”类。 然后，删除一行：
$(document).ready(function(){
$('body').on('click', '.removeRowBtn', function(){
// to make sure at least one row remains
if($('.removeRowBtn').length > 0){
$(this).parents('tr').remove();
}
});
});
这就是你所需要的。上面的代码使用上下文来定位您单击的“删除按钮”的父行。无需指定哪个表，计算哪个行或剩余行数等。
答案 1 :(得分：0)
首先document.getElementById('button')首先返回undefined，因为您的网页中没有id=button的元素。
这是你得到的错误，但我认为你应该删除你的表行略有不同。
最简单的方法是：
function deleteRow(elem) {
var table = elem.parentNode.parentNode.parentNode;
var rowCount = table.rows.length;
if(rowCount === 1) {
alert('Cannot delete the last row');
return;
}
// get the "<tr>" that is the parent of the clicked button
var row = elem.parentNode.parentNode;
row.parentNode.removeChild(row); // remove the row
}
并将此函数用作每个按钮上的单击事件处理程序：
<table>
<tr>
<td><button onclick="deleteRow(this)">delete</button></td>
</tr>
</table>
答案 2 :(得分：0)
没有必要创建deleteRow（tableID），因为这样做是为了覆盖javascript的默认deleteRow函数，所以不要创建deleteRow（tableID），只需添加'document.getElementById（'dataTable'）。deleteRow（ this.rowIndex）'点击删除按钮
<input type="button" name="button" value=delete id=delete onclick="document.getElementById('dataTable').deleteRow(this.rowIndex)">
答案 3 :(得分：0)
您可以使用以下方法删除特定行。
脚本方法：
function deleteRow(element,tableID) {
try {
var tableElement = document.getElementById(tableID);
if(tableElement.rows.length <= 1){
alert("Cannot delete all the rows.");
return;
}
var x = element.parentElement;//td tag
x = x.parentElement;// tr tag
x.remove();
}catch(e) {
alert(e);
}
}
TD中的按钮元素
<TD><INPUT type="button" name="button" value=delete id=delete onclick="deleteRow(this,'dataTable')"></TD>
答案 4 :(得分：0)
<div class="table-responsive">
<table class="table" id="testTable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Type</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="mainScript" name="mainScript"></td>
<td><input type="text" id="rollBackScript" name="rollBackScript"></td>
<td><select name="type" id ="type" >
<option value="Automated" selected >Automated</option>
<option value="Manual" >Manual</option>
</select>
</td>
<td><input type="button" class="btn btn-danger" value="Delete" onclick="deleteRow(this);"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row" align="left">
<input type="button" class="btn btn-success" value="Add Row" onclick="addRow('scriptsTable')" />
</div>
JavaScript函数
<script>
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;
case "button":
newcell.childNodes[0].value = "Delete";
break;
}
}
}
function deleteRow(deleteBtn) {
var table = document.getElementById('scriptsTable');
if(table.rows.length <= 2){
alert("Cannot delete all the rows.");
return;
}
if (typeof(deleteBtn) == "object") {
$(deleteBtn).closest("tr").remove();
} else {
return false;
}
}
</script>
答案 5 :(得分：0)
试试这个。这是一个有效的例子
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td><button>Delete</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
var table = $('#example').DataTable({
"columns": [
null,
null,
null,
{
"sortable": false
}
]
});
});
$('#example').on("click", "button", function(){
console.log($(this).parent());
table.row($(this).parents('tr')).remove().draw(false);
});
</script>