javascript - 如何在从 json 数据创建 html 表时创建隐藏的 行？

Question

我有一个格式如下的 json 数据:

'[{"number":"1","id":"2","price":"100.70","date":"2015-10-18 03:00:00","hidden":"21"},
{"number":"2","id":"2","price":"88.20","date":"2015-10-18 04:00:00","hidden":"22"}]';

我正在接收此数据，稍后我将从中创建表格内容:

json = JSON.parse(data);

$.each(json, function(i, v) {
  $('<tr/>', {
    html: [$('<td/>', {
      text: v.number
    }), $('<td/>', {
      text: v.id
    }), $('<td/>', {
      text: v.price
    }), $('<td/>', {
      text: v.date
    }), $('<td/>', {
      text: 'show details'
    }), $('<td/>', {
      text: v.hidden
    })]
  }).appendTo('#dataTables-example tbody')
})

它很好地附加到我现有的 html 代码中:

<table class="table table-striped table-bordered table-hover" id="dataTables-example">
      <thead>
        <tr>
          <th>number</th>
          <th>id</th>
          <th>price</th>
          <th>date</th>
            <th>show details</th>
          <th style="display:none;">hidden identifier</th>

        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

在每一行中都有一个“显示详细信息”字段。在我的 json 中，我传递了 hidden 参数，当用户单击“显示详细信息”链接时，它应该只向他显示一个警报窗口，其中包含来自 hidden 字段的数字。我不想在表中向用户显示该值，但到目前为止我所能做的就是将此字段隐藏在标题中:

<th style="display:none;">hidden identifier</th>

但是我怎样才能将它隐藏在每一行中，同时在用户单击显示详细信息时将其传递给警报？

这是我的 fiddle http://jsfiddle.net/uo8rc5qL/1/

谢谢!

Answer 1

我猜你也有js来处理显示详细信息的点击，对吗？如果是这种情况，您只需在 data 属性中添加 hidden 即可，然后在点击句柄中检索它。

类似于:

$.each(json, function(i, v) {
  $('<tr/>', {
    html: [$('<td/>', {
      text: v.number
    }), $('<td/>', {
      text: v.id
    }), $('<td/>', {
      text: v.price
    }), $('<td/>', {
      text: v.date
    }), $('<td/>', {
      html: [
        $('<a/>', {
          href: '#',
          class: 'show-details',
          text: 'show details',
          data: { id: v.hidden },
          click: function() {
            var id = $(this).data('id');
            console.log(id);
            alert(id);
          }
        })
      ]
    })]
  }).appendTo('#dataTables-example tbody')
})

然后在点击 handle 上:

$('.show-details').on('click', function() {
  var id = $(this).data('id');
  // whatever you have here.
})