码迷,mamicode.com
首页 > Web开发 > 详细

ajax异步获取数据后动态向构建表格并添加数据

时间:2018-08-10 17:04:21      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:wifi   i++   nbsp   方法   isp   lan   splay   ini   cat   

技术分享图片

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

 

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;

 

ajax异步获取数据后动态向构建表格并添加数据

标签:wifi   i++   nbsp   方法   isp   lan   splay   ini   cat   

原文地址:https://www.cnblogs.com/dss1025/p/9455791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!