需求,要求根据请求动态获取数据表格,,表格行数随数据库中存数据条数展示
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异步获取数据后动态向构建表格并添加数据
原文地址:https://www.cnblogs.com/dss1025/p/9455791.html