zoukankan      html  css  js  c++  java
  • ajax异步获取数据后动态向构建表格并添加数据

    需求,要求根据请求动态获取数据表格,,表格行数随数据库中存数据条数展示

    1.html中table中含有tbody

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

    2 js方法中 后台查询数据返回jsonArr 。text格式为text[txt[0],txt[1]]。txt[1]中数据为构建表格数据

     $.ajax({
                type: 'get',
                url: url,
                data: {docMainId: mainId},
                dataType: "json",
                success: function (text) {
                    var str = "";
                    
                    var data = text[1];
                    for ( var i=0;i<data.length;i++) {
                        str += "<tr>" +
                        "<td align='center'>" + (i+1) + "</td>" +
                        "<td style='display: none'>" +" <input type='input' class='tbody1' name='fdDetail_Form["+i+"].fdPlanId' value="+ data[i].fdPlanId +" />" + "</td>"+
                        "<td >" + " <input type='input' class='tbody1' readOnly='readOnly'  name='fdDetail_Form["+i+"].fdLandmark' value="+data[i].fdLandmark+" />" + "</td>" ;
                     "<td >" +" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdCashCate' value='尾款'/>" + "</td>";
                    
                      
                      "<td >" +" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdReceivables' value="+ data[i].fdReceivables + " />" +"</td>" +
                        "<td>"+" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdCollected' value=" + data[i].fdCollected + " />" +"</td>" +
                       if(data[i].fdUnreceivable=='0'||data[i].fdInvoiced=='0'){
                            str+="<td>"+" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdThisReturn' value=''/>" +"</td>" + 
                            "</tr>";
                        }else{
                
                       str+= "<td>"+" <input type='input' id='returnId["+i+"]' class='tbody2' name='fdDetail_Form["+i+"].fdThisReturn' value=''  onblur='getIndex(this)' /> " +"</td>" + 
                        "</tr>";
                        }
                    }
                    
                    tbody.innerHTML = str;
                  
                  
                }
                });
         
    }

    3 获取表格数据行数

    var tbody=window.document.getElementById("tbody-result");
    rows=tbody.rows.length;

  • 相关阅读:
    红黑树(二)插入
    HDU 3415 Max Sum of Max-K-sub-sequence(单调队列)
    Codeforces 433 Div.2(A、B、C、D)
    Codeforces 846D Monitor(简单二分+二维BIT)
    hihoCoder 1403 后缀数组一·重复旋律(后缀数组+单调队列)
    CF 787D Legacy(线段树思想构图+最短路)
    HDU 6165 FFF at Valentine(Tarjan缩点+拓扑排序)
    Codeforces 165E Compatible Numbers(二进制+逆序枚举)
    Codeforces 672D Robin Hood(二分好题)
    HITOJ 2739 The Chinese Postman Problem(欧拉回路+最小费用流)
  • 原文地址:https://www.cnblogs.com/dss1025/p/9455791.html
Copyright © 2011-2022 走看看