jquery的table每列得到ID,jquery组装table

骑猪看日落 2022-08-18 13:19 283阅读 0赞

在html或jsp页面的Table这样写:

  1. <pre name="code" class="html"><table class="listtable" id = "retListTable">
  2. <colgroup>
  3. <col width="20px">
  4. </colgroup>
  5. <thead>
  6. <tr class="con-table-hd">
  7. <th class="tb-min">序号</th>
  8. <th class="tb-min"><span style="font-family:Microsoft YaHei;">Event</span>ID</th>
  9. <th class="tb-min"><span style="font-family:Microsoft YaHei;">Event</span>级别</th>
  10. <th class="tb-min"><span style="font-family:Microsoft YaHei;">Event</span>代码</th>
  11. <th class="tb-min">描述</th>
  12. <th class="tb-min"> 客户ID</th>
  13. <th class="tb-min">采购单ID</th>
  14. <th class="tb-min">处理建议</th>
  15. <th class="tb-min">事件状态</th>
  16. <th class="tb-min tb-ctr">操作</th>
  17. </tr>
  18. </thead>
  19. <tbody id = "retListBody" >
  20. </tbody>
  21. </table>

在javascript中,的查询Ajax方法

  1. //查询
  2. function search(pageIndex) {
  3. parmeterId = $("#customerSelect").val();
  4. $.ajax({
  5. url: getHost() + "customer/searchList.json?customerId=" + parmeterId,
  6. type: 'post',
  7. dataType: 'json',
  8. success: function (data) {
  9. if (data.success) {
  10. var retlist = data.rows;
  11. $(".retListTr").remove();
  12. for (var i = 0; i < retlist.length; i++) {
  13. var vo = retlist[i];
  14. var tbodyString = "<tr class = 'retListTr' data-id=" + vo.purOrderId + " data-customerid="+vo.customerId+">";
  15. tbodyString = tbodyString + '<td class="tb-min">' + (i + 1) + '</td>'
  16. + '<td class="tb-min">' + vo.eventId + '</td>'
  17. + '<td class="tb-min">' + vo.eventLevel + '</td>'
  18. + '<td class="tb-min">' + vo.eventCode + '</td>'
  19. + '<td class="tb-min">' + vo.eventDesc + '</td>'
  20. + '<td class="tb-min">' + vo.customerId + '</td>'
  21. + '<td class="tb-min">' + vo.purOrderId + '</td>'
  22. + '<td class="tb-min">' + vo.suggest + '</td>'
  23. + '<td class="tb-min">' + vo.eventStatus + '</td>'
  24. + '<td class="tb-min" ><a href="javascript:void(0)" data-action="show">详情</a></td>';
  25. tbodyString = tbodyString + "</tr>";
  26. $("#retListBody").append($(tbodyString));
  27. }
  28. } else {
  29. Msg(data.message)
  30. }
  31. }
  32. });
  33. }

在表单初始化的时候,绑定事件。在点击每一列的编辑或删除的时候,得到的ID

  1. //点击操作-详情的时候,知道是哪一行的数据
  2. $("#retListTable").on("click", "[data-action]", function (e) {
  3. var target = $(e.target);
  4. var action = target.data('action');
  5. var id = target.parents('tr').data('id');
  6. var customerId = target.parents('tr').data('customerid');
  7. switch (action) {
  8. case 'show':
  9. onShowClick(customerId, id);
  10. break;
  11. }
  12. });

即实现下图的效果:

在点击删除、详情、查看的时候,可以得到具体的ID,然后再用它去查。

20151222144749972

发表评论

表情:
评论列表 (有 0 条评论,283人围观)

还没有评论,来说两句吧...

相关阅读