分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 02:09责任编辑:彭小芳关键词:暂无标签

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

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved