ajax异步获取数据后动态向构建表格并添加数据
发布时间:2020-12-16 03:02:58 所属栏目:百科 来源:网络整理
导读:需求,要求根据请求动态获取数据表格,,表格行数随数据库中存数据条数展示 ? 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 联系
需求,要求根据请求动态获取数据表格,,表格行数随数据库中存数据条数展示 ? 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; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |