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

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

1、HTML页面

[html]  view plain  copy
 print ?
  1. >  
  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>SEQlabel>  
  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">酒店seqoption>  
  33.                     <option value="order_no">订单号option>  
  34.                     <option value="cellid">cellidoption>  
  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>hotelSeqth>  
  49.                 <th>酒店名称th>  
  50.                 <th>订单号th>  
  51.                 <th>联系人手机号th>  
  52.                 <th>预定时间th>  
  53.                 <th>userIdth>  
  54.                 <th>cellidth>  
  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 += "" +  
  26.                         "" + data[i].hotel_seq + "" +  
  27.                         "" + data[i].hotel_name + "" +  
  28.                         "" + data[i].order_no + "" +  
  29.                         "" + data[i].user_phone + "" +  
  30.                         "" + data[i].create_time + "" +  
  31.                         "" + data[i].user_id + "" +  
  32.                         "" + data[i].cellid + "" +  
  33.                         "" + data[i].gps_city + "" +  
  34.                         "" + data[i].cell_city + "" +  
  35.                         "" + data[i].distance + "" +  
  36.                         "";  
  37.                     }  
  38.                     tbody.innerHTML = str;  
  39.                 }  
  40.             },  
  41.             error: function () {  
  42.                 alert("查询失败")  
  43.             }  
  44.         });  
  45.     });  
  46. });  

3、示例图

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


你可能感兴趣的:(ajax异步获取数据后动态向表格中添加数据(行))