ajax异步获取数据后动态向构建表格并添加数据
Posted 我想长点脑子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
以上是关于ajax异步获取数据后动态向构建表格并添加数据的主要内容,如果未能解决你的问题,请参考以下文章