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

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

1、HTML页面

[html] view plain copy
 print?
  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.   
  11. <body>  
  12. <div class="main pusher">  
  13.     <form class="ui form vertical segment form-search">  
  14.         <div class="fields">  
  15.             <div class="halfsixCl wide field js_query_date">  
  16.                 <label for="checkDate">预定截止日期</label>  
  17.                 <input name="checkDate" type="text" id="checkDate">  
  18.             </div>  
  19.   
  20.             <div class="sixCl wide field">  
  21.                 <label>SEQ</label>  
  22.                 <input name="hotelSeq" id="hotelSeq" placeholder="" type="text">  
  23.             </div>  
  24.   
  25.             <div class="sixCl wide field js_query_seq">  
  26.                 <label>订单号</label>  
  27.                 <input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder="">  
  28.             </div>  
  29.             <div class="sixCl wide field js_query_btype">  
  30.                 <label>排序字段</label>  
  31.                 <select name="sortFiled" id="sortFiled">  
  32.                     <option value="hotel_seq">酒店seq</option>  
  33.                     <option value="order_no">订单号</option>  
  34.                     <option value="cellid">cellid</option>  
  35.                 </select>  
  36.             </div>  
  37.             <div>  
  38.                 <label></label>  
  39.                 <input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/>  
  40.             </div>  
  41.         </div>  
  42.     </form>  
  43.   
  44.     <div class="table-container">  
  45.         <table class="ui nine column table celled table-result" id="table-result">  
  46.             <thead>  
  47.             <tr>  
  48.                 <th>hotelSeq</th>  
  49.                 <th>酒店名称</th>  
  50.                 <th>订单号</th>  
  51.                 <th>联系人手机号</th>  
  52.                 <th>预定时间</th>  
  53.                 <th>userId</th>  
  54.                 <th>cellid</th>  
  55.                 <th>gps定位城市</th>  
  56.                 <th>wifi定位城市</th>  
  57.                 <th>定位距离</th>  
  58.             </tr>  
  59.             </thead>  
  60.             <tbody id="tbody-result">  
  61.             </tbody>  
  62.         </table>  
  63.     </div>  
  64. </div>  
  65. </body>  
  66. </html>  

2、cheat-order.js

[javascript] view plain copy
 print?
  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.   
  9.         $.ajax({  
  10.             type: "post",  
  11.             dataType: "json",  
  12.             url: "ac/order/queryCheatOrder",  
  13.             data: {  
  14.                 hotelSeq: hotelSeq,  
  15.                 orderNo: orderNo,  
  16.                 sortFiled: sortFiled,  
  17.                 checkDate: checkDate  
  18.             },  
  19.             success: function (msg) {  
  20.                 if (msg.ret) {  
  21.                     var str = "";  
  22.                     var data = msg.data;  
  23.   
  24.                     for (i in data) {  
  25.                         str += "<tr>" +  
  26.                         "<td>" + data[i].hotel_seq + "</td>" +  
  27.                         "<td>" + data[i].hotel_name + "</td>" +  
  28.                         "<td>" + data[i].order_no + "</td>" +  
  29.                         "<td>" + data[i].user_phone + "</td>" +  
  30.                         "<td>" + data[i].create_time + "</td>" +  
  31.                         "<td>" + data[i].user_id + "</td>" +  
  32.                         "<td>" + data[i].cellid + "</td>" +  
  33.                         "<td>" + data[i].gps_city + "</td>" +  
  34.                         "<td>" + data[i].cell_city + "</td>" +  
  35.                         "<td>" + data[i].distance + "</td>" +  
  36.                         "</tr>";  
  37.                     }  
  38.                     tbody.innerHTML = str;  
  39.                 }  
  40.             },  
  41.             error: function () {  
  42.                 alert("查询失败")  
  43.             }  
  44.         });  
  45.     });  
  46. });  

3、示例图

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


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

posted @ 2018-05-29 14:20  星朝  阅读(1579)  评论(0)    收藏  举报