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

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



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值