建立动态表格，使用ajax将前台查询条件传给后台，并将查询结果以表格的形式展示出来。
页面的展示效果如下图所示：
第一步：查询条件的部分：
代码如下：
<div class="text-c">
??<span style="text-indent: 2em;display: inline-block;font-size:20px">账号：</span>
???<input ?type="text" name="telephone" id="telephone" placeholder=" 装维人员工号" style="width:120px" class="input-text">
</br>
???<span style="font-size: 20px">开始日期：</span>
???<input type="text" onfocus="WdatePicker({ maxDate:‘#F{$dp.$D(\‘startTime\‘)||\‘%y-%M-%d\‘}‘ })" id="startTime" ?name="startTime" class="input-text Wdate" style="width:120px;">
???</br><span style="font-size: 20px">截止日期：</span>
???<input type="text" onfocus="WdatePicker({ minDate:‘#F{$dp.$D(\‘endTime\‘)}‘,maxDate:‘%y-%M-%d‘ })" id="endTime" ?name="endTime" class="input-text Wdate" style="width:120px;">
???</br><span style="font-size: 20px">分纤箱号：</span>
???<input ?type="text" name="fiberopticnumber" ?id="" placeholder=" 分纤箱号" style="width:120px" class="input-text"><br><br>
//点击查询按钮的时候调用search()函数
???<button name="" ?class="btn btn-success" type="submit" style="height: 40px;" onclick="search()"><i class="Hui-iconfont"></i> <span style="font-size: 20px">查询</span></button>
???<button name="" ?class="btn btn-success" type="submit" style="height: 40px;" onclick="window.location.reload()"><i class="Hui-iconfont"></i> <span style="font-size: 20px">重置</span></button>
</div>
第二步：首先建立动态表格的表头，表头信息固定。
代码如下：由于表头的信息较多，只显示一些主要的信息，其他的信息都隐藏。
<table class="table table-bordered table-striped text-center" id=‘table‘>
???<thead>
???<tr>
???????<th style="display: none">客户名</th>
???????<th style="display: none">电话</th>
???????<th>装维人员</th>
???????<th>县区</th>
???????<th style="display: none">支局类型</th>
???????<th style="display: none">支局类型</th>
???????<th style="display: none">录入时间</th>
???????<th ??style="display: none">详细地址</th>
???????<th>分纤箱号</th>
???????<th style="display: none">分纤箱位置图片</th>
???????<th style="display: none">大门照片</th>
???????<th style="display: none">居住照片</th>
???????<th style="display: none">宽带供应商</th>
???????<th style="display: none">协议到期时间</th>
???????<th>详情</th>
???</tr>
???</thead>
</table>
第三步：使用ajax将前台查询条件传送到后台，并将查询结果传送到前台。
代码如下：
function search(){
???$.ajax({
???????type:‘Post‘,
???????url:"FtpAction_listUserQuery",
???????data:{
??????????telephone:$(‘#telephone‘).val(),//获取到查询条件中电话号码的内容
???????????startTime:$(‘#startTime‘).val(),//获取到查询条件中的开始时间的内容
???????????endTime:$(‘#endTime‘).val(),//获取到查询条件中的结束时间的内容
???????????fiberopticnumber:$(‘#fiberopticnumber‘).val()//获取到查询条件中分纤箱号的内容，并将查询条件传送给后台
???????},
???????dataType:‘json‘,
???????success:function (data) {
??????????if(data!=null){
???????????var table = document.getElementById("table");
???????????//建立动态表格，字段id号应和数据库中的字段一致，并且只显示表头字段显示的内容，其他的字段信息隐藏显示。
???????????var rows=table.rows.length;
???????????????????for(var i=0;i<data.length;i++) {
???????????????????????var row = table.insertRow(table.rows.length);
???????????????????????var c1 = row.insertCell(0);
???????????????????????c1.innerHTML = data[i].id;
???????????????????????c1.style.display=‘none‘;
???????????????????????var c2 = row.insertCell(1);
???????????????????????c2.innerHTML = data[i].customer;
???????????????????????c2.style.display=‘none‘;
???????????????????????var c3 = row.insertCell(2);
???????????????????????c3.innerHTML = data[i].phonenumber;
???????????????????????c3.style.display=‘none‘;
???????????????????????var c4 = row.insertCell(3);
???????????????????????c4.innerHTML = data[i].username;
???????????????????????var c5 = row.insertCell(4);
???????????????????????c5.innerHTML = data[i].couties;
???????????????????????var c6 = row.insertCell(5);
???????????????????????c6.innerHTML = data[i].subtype;
???????????????????????c6.style.display=‘none‘;
???????????????????????var c7 = row.insertCell(6);
???????????????????????c7.innerHTML = data[i].subname;
???????????????????????c7.style.display=‘none‘;
???????????????????????//将录入时间对象中的参数穿进来
???????????????????????var c8 = row.insertCell(7);
???????????????????????c8.innerHTML = data[i].dateString;
???????????????????????c8.style.display=‘none‘;
???????????????????????var c9 = row.insertCell(8);
???????????????????????c9.innerHTML = data[i].detailedaddress;
???????????????????????c9.style.display=‘none‘;
???????????????????????var c10 = row.insertCell(9);
???????????????????????c10.innerHTML = data[i].fiberopticnumber;
???????????????????????var c11 = row.insertCell(10);
???????????????????????c11.innerHTML = data[i].fenqianlocation;
???????????????????????c11.style.display=‘none‘;
???????????????????????var c12 = row.insertCell(11);
???????????????????????c12.innerHTML = data[i].door;
???????????????????????c12.style.display=‘none‘;
???????????????????????var c13 = row.insertCell(12);
???????????????????????c13.innerHTML = data[i].live;
???????????????????????c13.style.display=‘none‘;
???????????????????????var c14 = row.insertCell(13);
???????????????????????c14.innerHTML = data[i].provider;
???????????????????????c14.style.display=‘none‘;
???????????????????????var c15 = row.insertCell(14);
???????????????????????c15.innerHTML = data[i].expire;
???????????????????????c15.style.display=‘none‘;
???????????????????????//插入详情按钮，当点击详情按钮的时候，以弹框的内容将所有隐藏信息显示出来。
???????????????????????var c16 = row.insertCell(15);
???????????????????????c16.innerHTML = ‘<button class="btn btn-link" onclick="$(\‘#w\‘).window(\‘open\‘); modify(this) ">详情</button>‘;
???????????????????} ?
????????????}else{
???????????????alert("没有找到符合此条件的信息或者输入错误！");
???????????????return false;
????????????}
??????????????}
???});}
查询表格——建立动态表格，使用ajax输入查询条件将后台数据查询出来以表格的形式展示出来
原文地址：https://www.cnblogs.com/ejll/p/10365438.html