jquery的table每列得到ID,jquery组装table
2015-12-22 14:43
609 查看
在html或jsp页面的Table这样写:
在javascript中,的查询Ajax方法
在表单初始化的时候,绑定事件。在点击每一列的编辑或删除的时候,得到的ID
即实现下图的效果:
在点击删除、详情、查看的时候,可以得到具体的ID,然后再用它去查。
<pre name="code" class="html"><table class="listtable" id = "retListTable"> <colgroup> <col width="20px"> </colgroup> <thead> <tr class="con-table-hd"> <th class="tb-min">序号</th> <th class="tb-min"><span style="font-family:Microsoft YaHei;">Event</span>ID</th> <th class="tb-min"><span style="font-family:Microsoft YaHei;">Event</span>级别</th> <th class="tb-min"><span style="font-family:Microsoft YaHei;">Event</span>代码</th> <th class="tb-min">描述</th> <th class="tb-min"> 客户ID</th> <th class="tb-min">采购单ID</th> <th class="tb-min">处理建议</th> <th class="tb-min">事件状态</th> <th class="tb-min tb-ctr">操作</th> </tr> </thead> <tbody id = "retListBody" > </tbody> </table>
在javascript中,的查询Ajax方法
//查询 function search(pageIndex) { parmeterId = $("#customerSelect").val(); $.ajax({ url: getHost() + "customer/searchList.json?customerId=" + parmeterId, type: 'post', dataType: 'json', success: function (data) { if (data.success) { var retlist = data.rows; $(".retListTr").remove(); for (var i = 0; i < retlist.length; i++) { var vo = retlist[i]; var tbodyString = "<tr class = 'retListTr' data-id=" + vo.purOrderId + " data-customerid="+vo.customerId+">"; tbodyString = tbodyString + '<td class="tb-min">' + (i + 1) + '</td>' + '<td class="tb-min">' + vo.eventId + '</td>' + '<td class="tb-min">' + vo.eventLevel + '</td>' + '<td class="tb-min">' + vo.eventCode + '</td>' + '<td class="tb-min">' + vo.eventDesc + '</td>' + '<td class="tb-min">' + vo.customerId + '</td>' + '<td class="tb-min">' + vo.purOrderId + '</td>' + '<td class="tb-min">' + vo.suggest + '</td>' + '<td class="tb-min">' + vo.eventStatus + '</td>' + '<td class="tb-min" ><a href="javascript:void(0)" data-action="show">详情</a></td>'; tbodyString = tbodyString + "</tr>"; $("#retListBody").append($(tbodyString)); } } else { Msg(data.message) } } }); }
在表单初始化的时候,绑定事件。在点击每一列的编辑或删除的时候,得到的ID
//点击操作-详情的时候,知道是哪一行的数据 $("#retListTable").on("click", "[data-action]", function (e) { var target = $(e.target); var action = target.data('action'); var id = target.parents('tr').data('id'); var customerId = target.parents('tr').data('customerid'); switch (action) { case 'show': onShowClick(customerId, id); break; } });
即实现下图的效果:
在点击删除、详情、查看的时候,可以得到具体的ID,然后再用它去查。
相关文章推荐
- jquery 去空格的应用
- selenium webdriver 学习总结-JQuery Selectors(十)
- 0顶 jQuery同步Ajax带来的UI线程阻塞问题及...
- jQuery学习笔记(二)基础事件
- 你不需要jQuery(五)
- data-ajax
- jquery validation验证身份证号、护照、电话号码、email
- jquery-fileupload IE8IE9无法上传图片的BUG及如何给input[type=file]自定义样式
- jquery控制audio的播放与暂停
- 【jQuery】使用$.extend()扩展工具函数
- jquery easyui easyui-treegrid 使用异步加载数据
- 【jQuery】URL操作函数
- 静下心来学jquery的用法
- <学习笔记> jQuery 国际化多语言
- 【jQuery】字符串操作函数trim
- 【jQuery】检测两个节点的包含关系
- 【jQuery】检测对象是否为原始对象
- jQuery插件开发全解析
- 【jQuery】检测对象是否为空
- 【jQuery】检测浏览器是否属于W3C盒子模型