javascript - 将数据存储在表行中并通过 jQuery 检索的最佳方式

Question

我有以下 php 代码结构:

• 循环
  • 创建表格行

这基本上创建了类似的东西:

<tr class="selection">
    <td>2</td>
    <td>20</td>
    <td>10</td>
    <td>1</td>
</tr>

当用户点击该行时，我会像这样访问选择

$(".bet-selection").click(function() {
    //Do some stuff    
}); 

选择必须返回 JQuery 数据(比我在表格行中的数据多)。

所以我想我会包含一个 jsonEncoded 数据字段，如下所示:

$encodedData = [1,2,..n];
<tr class="selection" data="encodedData">
    <td>2</td>
    <td>20</td>
    <td>10</td>
    <td>1</td>
</tr>

我的想法是像这样通过 jQuery 访问这些数据:

$(".bet-selection").click(function() {
    var data = $('.selection').val();
    var dataObject = $.parseJSON( data );
});

显然这是行不通的。

所以我的问题是:是否有按照这些思路做某事的标准方法？

Answer 1

首先，您应该将数据存储在这样的行中:

<?php $encodedData = [1,2,..n]; ?>

<tr class="selection" data-row="<?= json_encode( $encodedData ); ?>">

这会将您的数据作为 json 字符串存储在 data-row 属性中

然后，要检索数据，可以从行中获取json字符串，并用JS解析:

$(".selection").click(function() {

    //get the clicked row's data 
    var data = $(this).data('row');

    //parse the JSON string 
    var decoded_data = JSON.parse( data );  
});