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>

但是，我如何在每一行中隐藏它，但在用户点击show details时也将其传递给警报？

这是我的小提琴http://jsfiddle.net/uo8rc5qL/1/

谢谢！

Answer 1

我猜你也有js来处理节目详情的点击，对吧？如果是这种情况，您只需在hidden属性中添加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/>', {
      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')
})

然后在点击手柄上：

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

Answer 2

只需添加点击事件并处理显示/隐藏：

    var data = '[{"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><div style="display:none;">'+ v.hidden+'</div><a class="hidden">show hidden</a></td>')]
  }).appendTo('#dataTables-example tbody')
});

$(".hidden").bind("click",function(){
   alert($(this).parent().children().first().html()); 
});

http://jsfiddle.net/uo8rc5qL/4/

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

2 个答案: