Javascript 按id从表中删除一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4967223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delete a row from a table by id
提问by zozo
I have a little problem. I have some dynamically created tables and each row has an id. I want to delete the row with the id "x".
我有一个小问题。我有一些动态创建的表，每一行都有一个 id。我想删除 ID 为“x”的行。
I tried the usual method (removeChild) but it doesn't work for tables apparently.
我尝试了通常的方法 (removeChild)，但它显然不适用于表格。
function deleteRow(tableid, rowid)
{
document.getElementById(tableid).removeChild(document.getElementById(rowid));
}
The error I get is: Node was not found" code: "8
我得到的错误是：找不到节点”代码：“8
I also tried this:
我也试过这个：
function deleteRow(tbodyid, rowid)
{
document.getElementById(tbodyid).removeChild(document.getElementById(rowid));
}
and got the same error.
并得到同样的错误。
I can't use the deleteRow()method because that one needs the index of the row and I prefer not to search for the id mark the index then delete (even though if I don't find other solutions...).
我无法使用该deleteRow()方法，因为该方法需要行的索引，而我不想搜索 id 标记索引然后删除（即使我没有找到其他解决方案......）。
回答by Vilx-
How about:
怎么样：
function deleteRow(rowid)
{
var row = document.getElementById(rowid);
row.parentNode.removeChild(row);
}
And, if that fails, this should really work:
而且，如果失败了，这应该真的有效：
function deleteRow(rowid)
{
var row = document.getElementById(rowid);
var table = row.parentNode;
while ( table && table.tagName != 'TABLE' )
table = table.parentNode;
if ( !table )
return;
table.deleteRow(row.rowIndex);
}
回答by rsbarro
From this post, try this javascript:
从这篇文章，试试这个javascript：
function removeRow(id) {
var tr = document.getElementById(id);
if (tr) {
if (tr.nodeName == 'TR') {
var tbl = tr; // Look up the hierarchy for TABLE
while (tbl != document && tbl.nodeName != 'TABLE') {
tbl = tbl.parentNode;
}
if (tbl && tbl.nodeName == 'TABLE') {
while (tr.hasChildNodes()) {
tr.removeChild( tr.lastChild );
}
tr.parentNode.removeChild( tr );
}
} else {
alert( 'Specified document element is not a TR. id=' + id );
}
} else {
alert( 'Specified document element is not found. id=' + id );
}
}
I tried this javascript in a test page and it worked for me in Firefox.
我在测试页面中尝试了这个 javascript，它在 Firefox 中对我有用。
回答by Yuri
to Vilx-:
到 Vilx-：
var table = row.parentNode;
while ( table && table.tagName != 'TABLE' )
table = table.parentNode;
and what if row.parentNodeis TBODY?
如果row.parentNode是TBODY怎么办？
You should check it out first, and after that
do whileby .tBodies, probably
你应该看看第一，之后做while的.tBodies，大概
回答by Napas
And what about trying not to delete but hide that row?
那么尝试不删除而是隐藏该行呢？
回答by Oralet
The parent of the row is not the object you think, this is what I understand from the error.
Try detecting the parent of the row first, then you can be sure what to write into getElementByIdpart of the parent.
该行的父级不是您认为的对象，这是我从错误中了解到的。
首先尝试检测该行的父级，然后您可以确定将什么写入getElementById父级的一部分。
回答by Oliver Zendel
Something quick and dirty:
一些快速而肮脏的事情：
<script type='text/javascript'>
function del_tr(remtr)
{
while((remtr.nodeName.toLowerCase())!='tr')
remtr = remtr.parentNode;
remtr.parentNode.removeChild(remtr);
}
function del_id(id)
{
del_tr(document.getElementById(id));
}
</script>
if you place
如果你放置
<a href='' onclick='del_tr(this);return false;'>x</a>
anywhere within the row you want to delete, than its even working without any ids
您要删除的行中的任何位置，甚至在没有任何 id 的情况下工作
回答by ATM Fahim
*<tr><a href="javascript:void(0);" class="remove">X</a></tr>*
<script type='text/javascript'>
$("table").on('click', '.remove', function () {
$(this).parent().parent('tr').remove();
});
