ajax异步获取数据后动态向表格中添加数据(行)

因为某些原因，项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面，网上找了半天都没有看到现成的，决定自己写个例子

<!doctype html>
<html>
<head>
    <Meta charset="utf-8">
    <title>xx信息查询</title>
    <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/js/ai/ai-lib.js"></script>
    <script src="/js/cheat-order.js"></script>   
</head>

<body>
<div class="main pusher">
    <form class="ui form vertical segment form-search">
        <div class="fields">
            <div class="halfsixCl wide field js_query_date">
                <label for="checkDate">预定截止日期</label>
                <input name="checkDate" type="text" id="checkDate">
            </div>

            <div class="sixCl wide field">
                <label>SEQ</label>
                <input name="hotelSeq" id="hotelSeq" placeholder="" type="text">
            </div>

            <div class="sixCl wide field js_query_seq">
                <label>订单号</label>
                <input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder="">
            </div>
            <div class="sixCl wide field js_query_btype">
                <label>排序字段</label>
                <select name="sortFiled" id="sortFiled">
                    <option value="hotel_seq">酒店seq</option>
                    <option value="order_no">订单号</option>
                    <option value="cellid">cellid</option>
                </select>
            </div>
            <div>
                <label></label>
                <input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/>
            </div>
        </div>
    </form>

    <div class="table-container">
        <table class="ui nine column table celled table-result" id="table-result">
            <thead>
            <tr>
                <th>hotelSeq</th>
                <th>酒店名称</th>
                <th>订单号</th>
                <th>联系人手机号</th>
                <th>预定时间</th>
                <th>userId</th>
                <th>cellid</th>
                <th>gps定位城市</th>
                <th>wifi定位城市</th>
                <th>定位距离</th>
            </tr>
            </thead>
            <tbody id="tbody-result">
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

2、cheat-order.js

$(function () {
    $('#btSearch').click(function () {
        var checkDate = $('#checkDate').val();
        var orderNo = $('#orderNo').val();
        var sortFiled = $('#sortFiled').val();
        var hotelSeq = $('#hotelSeq').val();
        var tbody=window.document.getElementById("tbody-result");

        $.ajax({
            type: "post",dataType: "json",url: "ac/order/queryCheatOrder",data: {
                hotelSeq: hotelSeq,orderNo: orderNo,sortFiled: sortFiled,checkDate: checkDate
            },success: function (msg) {
                if (msg.ret) {
                    var str = "";
                    var data = msg.data;

                    for (i in data) {
                        str += "<tr>" +
                        "<td>" + data[i].hotel_seq + "</td>" +
                        "<td>" + data[i].hotel_name + "</td>" +
                        "<td>" + data[i].order_no + "</td>" +
                        "<td>" + data[i].user_phone + "</td>" +
                        "<td>" + data[i].create_time + "</td>" +
                        "<td>" + data[i].user_id + "</td>" +
                        "<td>" + data[i].cellid + "</td>" +
                        "<td>" + data[i].gps_city + "</td>" +
                        "<td>" + data[i].cell_city + "</td>" +
                        "<td>" + data[i].distance + "</td>" +
                        "</tr>";
                    }
                    tbody.innerHTML = str;
                }
            },error: function () {
                alert("查询失败")
            }
        });
    });
});

3、示例图

备注：css已经删除了，效果比上面示例图要差些

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明

ajax异步获取数据后动态向表格中添加数据(行)

猜你在找的Ajax相关文章