zoukankan      html  css  js  c++  java

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


    原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明
  • 相关阅读:
    php设计模式 — 简单工厂模式(静态工厂方法模式)
    Vue-Router
    各种选项卡
    jq动画
    如何使用swiper写轮播
    Gulp代码压缩
    闭包
    jquery.validation校验
    grunt-js文件压缩
    CSS
  • 原文地址：https://www.cnblogs.com/jpfss/p/9104836.html
Copyright © 2011-2022 走看看