Question

假设我有一个项目表，我想在每行添加一个按钮来删除该项目。项目来自数据库，因此它们具有唯一的ID。在jQuery函数中，我必须检索所述项的ID，以便我可以打开一个确认框并最终将浏览器重定向到删除页面（永远不要进行安全检查，它是供内部使用的）。

标记中的哪个位置最好放置ID？

Answer 1

我认为将id作为行ID的一部分更好：

....
<tr id="item_3">...<td>delete tag</td></tr>
<tr id="item_4">...<td>delete tag</td></tr>
<tr id="item_5">...<td>delete tag</td></tr>
....

然后在jQuery中使用简单的正则表达式获取id。

更新：或者，只需将其放入删除按钮/锚点的rel属性中即可。

更新2：由于在这种情况下正则表达式可能会降低jQuery的性能，因此请尝试将id作为每行的rel属性。

Answer 2

为每件商品指定一个唯一ID。 '＃'选择器工作得最快，因为它映射到本机javascript方法。

Answer 3

只是我，还是那么简单？

<tr id="cell-8958"><td>..<td><td class="delete">Delete me</td></tr>

...

$('.delete').click(function(){
  thisid = $(this).parent().attr('id');
  dostuff();
});

编辑：或者，如果你想从数字开始：

.id { display: none; }

...

<tr><td class="id">cell-8958</td><td>..<td><td class="delete">Delete me</td></tr>

...

$('.delete').click(function(){
  thisid = $(this).parent().find('td.id').text();
  dostuff();
});

P.S。：CSS可能有所不同，尚未在浏览器中测试过。

一个。

Answer 4

将它放入<tr>元素是有意义的，因为这是包含与此项目相关的所有数据/标记的项目。如果你事先知道删除按钮是唯一与唯一ID交互的元素，那么将它添加到按钮本身会稍微快一些。

Answer 5

有几种方法可以达到这个目的。

首先，试试jQuery meta plugin。这允许您将JSON数据嵌入元素的class属性中。它验证并且不影响应用于元素的类。你的tr可能是这样的：

<tr class="some-class {uid:'12345', asMuchDataAsYouLike}">

或者（如果您不介意使用HTML5），请使用数据属性（here，here）：

<tr data-uid="12345">

注意：如果您使用正确的DocType（<!DOCTYPE html>），这将验证为HTML5。

编辑（示例用法）：

HTML：

<tr data-uid="12345">
    <td>Some Data</td>
    <td><button class="delete">Delete</button></td>
</tr>

使用Javascript：

$('button.delete').click(function(){
    // obviously you'd do something different with the data ;)
    alert($(this).closest('tr').attr('data-uid'));
    });

Answer 6

你应该把它放在一个围绕删除按钮的表格上：

<tr>...<td><form action="delete.htm?id=001"><input type="submit">Delete</input></form></td></tr>

我意识到这可能看起来有点重量级，但这可以在没有javascript的情况下运行，这总是最佳实践。

Answer 7

未经测试，但假设您使用的是jQuery 1.3 +

$(this).closest('tr').attr('id');

应该为您提供您单击的行的ID（注意，在构建表时，您必须首先为该行提供id。

Answer 8

我宁愿使用div布局而不是表

识别jQuery交互元素的最佳方法

8 个答案: