您的位置:首页 > Web前端 > JQuery

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

2015-12-22 14:43 609 查看
在html或jsp页面的Table这样写:

<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,然后再用它去查。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: