【发布时间】：2010-02-09 01:24:34
【问题描述】：
假设我有一个项目表，我想在每一行中添加一个按钮来删除该项目。项目来自数据库，因此它们具有唯一的 ID。在 jQuery 函数中，我必须检索所述项目的 ID，以便我可以打开一个确认框并最终将浏览器重定向到删除页面（没关系安全检查，它是供内部使用的）。
在标记的哪个位置放置 ID 更好？
【问题讨论】：
【发布时间】：2010-02-09 01:24:34
【问题描述】：
我认为最好将 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 属性。
【讨论】：
-
在这种情况下我会使用什么选择器来仅识别
delete单元格？给他们一个班级，然后从他们的父母那里获取 ID？ -
@kemp 是的，但您应该从父级的父级获取
id:) -
rel是一个有趣的解决方案，其中任何值都有效？ -
@kemp，不确定
rel(w3schools.com/TAGS/att_a_rel.asp) 的有效值，你应该用验证器检查它
给每个项目一个唯一的 ID。 '#' 选择器运行速度最快，因为它映射到原生 javascript 方法。
【讨论】：
-
只是一个补充：ID 必须以字母开头。更多信息w3.org/TR/html401/types.html#type-name
-
好吧，我可以给他们一个唯一的 ID，但我不能使用
#选择器，除非我想为每个项目编写一个函数。我必须将它们作为它们的包含表的后代来访问。对吗？ -
您不需要使用ID选择器，您可以使用
$('button').closest('tr')来选择父行。
只有我一个人，还是这么简单？
<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 可能不同，尚未在浏览器中测试。
一个。
【讨论】：
-
“没关系安全检查，它是供内部使用的”-仔细阅读;]：D
将它放入<tr> 元素是有意义的，因为它是包含与该项目相关的所有数据/标记的项目。
如果您事先知道删除按钮是唯一会与唯一 ID 交互的元素，那么将其添加到按钮本身会更快更容易。
【讨论】：
有几种方法可以实现这一目标。
首先，试试jQuery meta plugin。这允许您将 JSON 数据嵌入到元素的类属性中。它验证并且不影响应用于元素的类。您的 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'));
});
【讨论】：
-
对于这种特定情况有点矫枉过正，但非常有趣的替代解决方案，谢谢
你应该把它放在删除按钮周围的表单上：
<tr>...<td><form action="delete.htm?id=001"><input type="submit">Delete</input></form></td></tr>
我意识到这可能看起来有点重量级，但它可以在没有 javascript 的情况下工作，这始终是最佳实践。
【讨论】：
-
非 js 支持的优点，可以通过确认模式和 Ajax 来增强。
未测试，但假设您使用的是 jQuery 1.3+
$(this).closest('tr').attr('id');
应该给你你点击的行的id（注意你在建表时必须先给行一个id。
【讨论】：
我宁愿使用 div 布局而不是 table
【讨论】：
-
-1 表示没有回答问题。这显然是一个语义上有效的表用例。
-
为什么会这样？我们不能再对来自数据库表的数据使用表了吗？
-
问题是如何找到最适合物品识别的地方，而不是在这种情况下应该使用什么样的标记标签。