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

时间：2023-02-15 09:59:50

因为某些原因，项目中突然需要做自己做个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 += "&lt;tr&gt;" +

                    "&lt;td&gt;" + data[i].hotel_seq + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].hotel_name + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].order_no + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].user_phone + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].create_time + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].user_id + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].cellid + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].gps_city + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].cell_city + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].distance + "&lt;/td&gt;" +

                    "&lt;/tr&gt;";

                }

                tbody.innerHTML = str;

            }

        },

        error: function () {

            alert("查询失败")

        }

    });

});


});

3、示例图

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

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

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

相关文章