Jquery - 访问特定于每一行的变量？

Question

我有一个网页并使用 php 我查询数据库并将结果显示在表格中，如下所示：

<table id="tablelist">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Info here1</td>
<td>Info here1</td>
<td class="actions">Action1 - Action2 - Action3</td>
</tr>
<tr>
<td>Info here2</td>
<td>Info here2</td>
<td class="actions">Action1 - Action2 - Action3</td>
</tr>
</tbody>
</table>

现在，每一行都有来自数据库的特定于该行的唯一信息。例如主 ID、日期和类别。当有人单击任何行的操作时，我需要获取特定于他们单击的行的这两条信息。目前我尝试这样做：

<div class="row_data">{info2 in json format}</div>    
<tr>
    <td>Info here1</td>
    <td>Info here1</td>
    <td class="actions">Action1 - Action2 - Action3</td>
    </tr>
<div class="row_data">{info2 in json format}</div>    
<tr>
    <td>Info here2</td>
    <td>Info here2</td>
    <td class="actions">Action1 - Action2 - Action3</td>
    </tr>

因此，当有人单击操作链接时，它将获取 row_data 的先前值，该值采用 json 格式。我将使用 jquery 解析 json 值并使用在 jquery 代码的其余部分中找到的信息。但我被告知这是无效的 html，不推荐。单击某个操作时使用的每行记录动态数据的推荐/最佳方式是什么，以便我可以在 jquery 代码中引用它？

Answer 1

方法是使用 HTML 5 的数据属性：

<tr id="foo" data-something="put whatever you want in here">
    <!-- content -->
</tr>

然后您可以使用 data-something 的值访问您存储在其中的信息

$("#foo").data("something")

，可以是您喜欢的任何值（只要它经过 过滤） htmlspecialchars（如果您直接从 PHP 回显它），并且如果更方便的话您可以使用多个数据属性（通常是这样）。

还有一篇关于该主题的 John Resig 的帖子。

Answer 2

Jon 的建议可行，但我讨厌在 HTML 中嵌入数据，因此我会创建一个从 id 到数据的 JSON 映射，并将这些 id 添加到 TR。从点击处理程序中，您可以获取 TR 的 ID 并从地图中查找数据。

Answer 3

我想我累了，可能误解了这一点，所以如果我提出完全错误的建议，请原谅...

所以说有人点击了任意行中的操作 1。也许您会从每个链接上的点击侦听器开始，假设您为链接提供了一个名为“action”的类...

<tr>
    <td class="json_info" style="display:none">{your json string}</td>
    <td>Info 1</td>
    <td>Info 2</td>
    <td><a class="action">action link</a></td>
</tr>

$('.action').click(function(){
    var json = $(this).parent().find('.json_info').html();
});

如果 json_info 的 html 是格式正确的 json 字符串，那么它应该能够从中读取为 json jquery 选择调用。