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

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

1、HTML页面

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>xx信息查询</title>
6. <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
7. <script type="text/javascript" src="/js/ai/ai-lib.js"></script>
8. <script src="/js/cheat-order.js"></script>
9. </head>
10. <body>
11. <div class="main pusher">
12. <form class="ui form vertical segment form-search">
13. <div class="fields">
14. <div class="halfsixCl wide field js_query_date">
15. <label for="checkDate">预定截止日期</label>
16. <input name="checkDate" type="text" id="checkDate">
17. </div>
18. <div class="sixCl wide field">
19. <label>SEQ</label>
20. <input name="hotelSeq" id="hotelSeq" placeholder="" type="text">
21. </div>
22. <div class="sixCl wide field js_query_seq">
23. <label>订单号</label>
24. <input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder="">
25. </div>
26. <div class="sixCl wide field js_query_btype">
27. <label>排序字段</label>
28. <select name="sortFiled" id="sortFiled">
29. <option value="hotel_seq">酒店seq</option>
30. <option value="order_no">订单号</option>
31. <option value="cellid">cellid</option>
32. </select>
33. </div>
34. <div>
35. <label></label>
36. <input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/>
37. </div>
38. </div>
39. </form>
40. <div class="table-container">
41. <table class="ui nine column table celled table-result" id="table-result">
42. <thead>
43. <tr>
44. <th>hotelSeq</th>
45. <th>酒店名称</th>
46. <th>订单号</th>
47. <th>联系人手机号</th>
48. <th>预定时间</th>
49. <th>userId</th>
50. <th>cellid</th>
51. <th>gps定位城市</th>
52. <th>wifi定位城市</th>
53. <th>定位距离</th>
54. </tr>
55. </thead>
56. <tbody id="tbody-result">
57. </tbody>
58. </table>
59. </div>
60. </div>
61. </body>
62. </html>

<!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>
        &lt;div class="sixCl wide field"&gt;
            &lt;label&gt;SEQ&lt;/label&gt;
            &lt;input name="hotelSeq" id="hotelSeq" placeholder="" type="text"&gt;
        &lt;/div&gt;

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

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

</div>

</body>

</html>

2、cheat-order.js

1. $(function () {
2. $('#btSearch').click(function () {
3. var checkDate = $('#checkDate').val();
4. var orderNo = $('#orderNo').val();
5. var sortFiled = $('#sortFiled').val();
6. var hotelSeq = $('#hotelSeq').val();
7. var tbody=window.document.getElementById("tbody-result");
8. $.ajax({
9. type: "post",
10. dataType: "json",
11. url: "ac/order/queryCheatOrder",
12. data: {
13. hotelSeq: hotelSeq,
14. orderNo: orderNo,
15. sortFiled: sortFiled,
16. checkDate: checkDate
17. },
18. success: function (msg) {
19. if (msg.ret) {
20. var str = "";
21. var data = msg.data;
22. for (i in data) {
23. str += "<tr>" +
24. "<td>" + data[i].hotel_seq + "</td>" +
25. "<td>" + data[i].hotel_name + "</td>" +
26. "<td>" + data[i].order_no + "</td>" +
27. "<td>" + data[i].user_phone + "</td>" +
28. "<td>" + data[i].create_time + "</td>" +
29. "<td>" + data[i].user_id + "</td>" +
30. "<td>" + data[i].cellid + "</td>" +
31. "<td>" + data[i].gps_city + "</td>" +
32. "<td>" + data[i].cell_city + "</td>" +
33. "<td>" + data[i].distance + "</td>" +
34. "</tr>";
35. }
36. tbody.innerHTML = str;
37. }
38. },
39. error: function () {
40. alert("查询失败")
41. }
42. });
43. });
44. });

$(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已经删除了，效果比上面示例图要差些

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