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 ); ?>">

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

然后，要检索数据，可以从行中获取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 );  
});

Answer 2

您可以使用php：

渲染这种标记

<tr class="selection" data-id="123">
    <td>2</td>
    <td>20</td>
    <td>10</td>
    <td>1</td>
</tr>

然后使用php渲染一个javascript哈希表：

window.myNameSpace.encodedDataHashTable = {
    "123": [2, 20, 10, 1],
    "456": [3, 30, 20, 4]
};

当你处理点击时：

$(".bet-selection").click(function() {
    var id = $(this).data("id");
    var dataObject = window.myNameSpace.encodedDataHashTable[id];
    console.log(dataObject);
});

但你真正需要的是一个前端框架或一些homebrow前端架构来为你处理这类事情。

无论如何，这就是这一切的结合：

＆＃13;

$(function() {
    window.myNameSpace = window.myNameSpace || {};
  
    window.myNameSpace.encodedDataHashTable = {
        "123": [2, 20, 10, 1],
        "456": [3, 30, 20, 4]
    };

    $(".bet-selection").click(function() {
      console.log(this);
        var id = $(this).data("id");
        var dataObject = window.myNameSpace.encodedDataHashTable[id];
        $("#demo").html(dataObject);
    });
});

＆＃13;

tr:hover { background-color: pink; cursor: pointer; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr class="bet-selection" data-id="123">
    <td>2</td><td>20</td><td>10</td><td>1</td>
  </tr>
  <tr class="bet-selection" data-id="456">
    <td>3</td><td>30</td><td>20</td><td>4</td>
  </tr>
</table>

Last click data: 
<pre id="demo"></pre>

＆＃13;

Answer 3

试试这个，

   var table = $('.selection');

   var rowLength = table.rows.length;

   for(var i=0; i<rowLength; i+=1){
      var row = table.rows[i];
   }

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

3 个答案: