Javascript 使用 Jquery 通过 id 选择 tr
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5589420/
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
Select tr by id with Jquery
提问by kwhohasamullet
I'm trying select a tr inside a table to delete it but am not having any luck with selectors.
我正在尝试在表中选择一个 tr 来删除它，但我对选择器没有任何运气。
Table looks like this:
表看起来像这样：
<table width="301" border="0" cellspacing="5" cellpadding="0" id="selectedproducts" =="">
<tbody>
<tr>
<th width="56" scope="col">Product:</th>
<th width="48" scope="col">Size:</th>
<th width="71" scope="col">Colour:</th>
<th width="41" scope="col">Qty</th>
<th width="55" scope="col">Price</th>
<th width="55" scope="col">Delete</th>
</tr>
<tr id="product_1">
<td>Shuttle</td>
<td>54.95</td>
<td>Red</td>
<td>1</td>
<td></td>
<td><a onclick="deleteProduct(id)">[X]</a></td>
</tr>
<tr id="product_2">
<td>Shuttle</td>
<td>54.95</td>
<td>Red</td>
<td>1</td>
<td></td>
<td><a onclick="deleteProduct(id)">[X]</a></td>
</tr>
</tbody>
</table>
The tr's with product id's are dynamically appended with jQuery so not sure if that makes a difference.
带有产品 ID 的 tr 是用 jQuery 动态附加的，因此不确定这是否有所不同。
deleteProduct(id)function looks like this:
deleteProduct(id)函数看起来像这样：
function deleteProduct(id) {
$('#product_' + id).remove();
}
When clicked nothing happens and there are no errors in the Chrome console.
单击时什么也没有发生，Chrome 控制台中也没有错误。
Mucking around a bit in the console:
在控制台中闲逛一下：
$('#selectedproducts').html();Returns the data
$('#selectedproducts').find('#product_1').html()returns empty
$('#selectedproducts').html();返回数据
$('#selectedproducts').find('#product_1').html()返回空
回答by mcgrailm
I would do it like this
我会这样做
<table width="301" border="0" cellspacing="5" cellpadding="0" id="selectedproducts" =="">
<tbody>
<tr>
<th width="56" scope="col">Product:</th>
<th width="48" scope="col">Size:</th>
<th width="71" scope="col">Colour:</th>
<th width="41" scope="col">Qty</th>
<th width="55" scope="col">Price</th>
<th width="55" scope="col">Delete</th>
</tr>
<tr id="product_1">
<td>Shuttle</td>
<td>54.95</td>
<td>Red</td>
<td>1</td>
<td></td>
<td><a>[X]</a></td>
</tr>
<tr id="product_2">
<td>Shuttle</td>
<td>54.95</td>
<td>Red</td>
<td>1</td>
<td></td>
<td><a>[X]</a></td>
</tr>
</tbody>
</table>
and the jQuery:
和 jQuery：
$('tr a').live('click', function () {
$(this).closest('tr').remove();
});
another alternative to this selector would be
这个选择器的另一种选择是
$('tr[id^="product_"] a').live('click', function () {
// you could ge the id number from the tr to do other things with
var id = $(this).closest('tr').attr('id').replace("product_","");
$(this).closest('tr').remove();
});
this would restrict it to only tr that whose id starts with "product_"
这会将其限制为仅 tr 其 id 以“product_”开头的
alternately you could delete item with an _id ending like this
或者，您可以删除以 _id 结尾的项目
$('tr[id^="product_"] a').live('click', function () {
// you could ge the id number from the tr
var id = $(this).closest('tr').attr('id').replace("product_","");
//then you could remove anything the that ends with _id
$('[id$="_'+id+'"]').remove();
});
I changed the code slightly here is a DEMO
我稍微改变了代码这里是一个演示
回答by Hussein
You don't need to have inline onclics and you don't need a function for this. All you need to do is is call thiswhich refers to the item being clicked. In the below example, any item you click on will be removed.
您不需要内联 onclics，也不需要为此提供功能。您需要做的就是调用this引用被单击的项目。在下面的示例中，您单击的任何项目都将被删除。
$('td').live('click', function() {
$(this).parent().remove();
})
Check working example at http://jsfiddle.net/aswae/2/
在http://jsfiddle.net/aswae/2/检查工作示例
You can also insert a delete button and select to remove by button clicked.
您还可以插入删除按钮并选择通过单击按钮删除。
Check updated example at http://jsfiddle.net/aswae/4/
在http://jsfiddle.net/aswae/4/检查更新的示例
回答by Matt Ball
Your deleteProductfunction takes an idargument, but nowhere in the onclickhandler is that argument defined. Try this instead:
您的deleteProduct函数接受一个id参数，但onclick处理程序中没有任何地方定义了该参数。试试这个：
HTML
HTML
<!-- snip -->
<a onclick="deleteProduct(this)">
JavaScript
JavaScript
function deleteProduct(elt) {
$(elt).closest('tr[id]').remove();
}
As pointed out in the comments, you've also got a bit of invalid markup in your <table>tag.
正如评论中指出的那样，您的<table>标签中也有一些无效标记。
That said, you're using jQuery so there's no excuse for not writing unobtrusive JavaScript. Get rid of the onclickattributes entirely, and use this instead:
也就是说，您使用的是 jQuery，所以没有理由不编写不引人注目的 JavaScript。onclick完全摆脱属性，并使用它：
$('#selectedproducts a').live('click', function () {
$(this).closest('tr[id]').remove();
});
If you want to get more specific with the selectors, this will work with the current markup:
如果您想更具体地使用选择器，这将适用于当前标记：
$('#selectedproducts td:last > a').live('click', function () {
$(this).closest('tr[id]').remove();
});
回答by Paul
Change your [X] link to something like:
将您的 [X] 链接更改为：
<a class="delete">[X]</a>
And your jQuery to:
和你的jQuery：
$(".delete").click(function() {
$(this).parents("tr").remove();
});
回答by Guttsy
If you're literally using deleteProduct(id)you're going to need to replace ID with the number of that row.
如果您确实在使用deleteProduct(id)，则需要将 ID 替换为该行的编号。
You could also just hop up a few levels in the DOM tree (remove the parent's parent) instead of manually putting in IDs. I believe you could put onclick="$(this).parent().parent().remove()"instead.
您也可以在 DOM 树中跳上几层（删除父级的父级），而不是手动输入 ID。我相信你可以onclick="$(this).parent().parent().remove()"代替。
