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

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

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

![20151222144749972][]

[20151222144749972]: /images/20220731/9394eeda86fc4a04b8bc44faad777b78.png