在JS表格中怎么删除一行（不是指定行，而是我表格中每行后面都有一个删除按钮，按其中一个按钮就删除那一行

原创于 2014-11-19 10:29:14 发布 · 4.6k 阅读

7 ·

CC 4.0 BY-SA版权

JavaScrip 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，用于从HTML表格中删除指定的行。通过点击每行中的“删除”按钮，可以触发该函数执行，实现行的移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>table-js删除行</title>
</head>
<body>
<script type="text/javascript">
function deleteRow(tableID, obj) {//参数为表格ID，触发对象
    //获得触发对象的行号，parentElement的个数取决于触发对象为TR的第几级子项，input=>td=>tr，所以parentElement有两个
    var rowIndex = obj.parentElement.parentElement.rowIndex;
    //var table = document.getElementById(tableID).deleteRow(rowIndex);
    obj.parentElement.parentElement.parentElement.deleteRow(rowIndex); //再简化：省略tableID参数
}
</script>
<table id="tb" border="1px">
<tr><td>第1行</td><td><input type="button" value="删除" onclick="deleteRow('tb',this)"/></td></tr>
<tr><td>第2行</td><td><input type="button" value="删除" onclick="deleteRow('tb',this)"/></td></tr>
<tr><td>第3行</td><td><input type="button" value="删除" onclick="deleteRow('tb',this)"/></td></tr>
<tr><td>第4行</td><td><input type="button" value="删除" onclick="deleteRow('tb',this)"/></td></tr>
</table>
</body>
</html>