jquery ajax自动生成表格table(一)
2013-08-21 20:00
459 查看
首先在jsp页面设定一个table骨架,首先把该table的display属性设置为none,这样在加载页面的时候就不会显示出来,代码如下
然后根据这个骨架用ajax来把动态生成table的各个行,并把后台数据添加到table中
<table id="generatedTable" style ="border=2; display: none;"> <thead> <tr> <th style='width:10%;'>第一列</th> <th style='width:15%;'>第二列</th> <th style='width:10%;'>第三列</th> <th style='width:10%;'>第四列</th> <th style='width:3%;'>第五列</th> </tr> </thead> <tbody> <tr id="cloneTr"> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>
然后根据这个骨架用ajax来把动态生成table的各个行,并把后台数据添加到table中
ajaxPost({ type:"GET", url:"<c:url value='/logDetails.auth'/>", data:"datas="+datas;//要发送的数据 //object是后台传过来的java list数据集合 success:function(objects){ //1,获取上面id为cloneTr的tr元素 var tr = $("#cloneTr"); $.each(objects, function(index,item){ //克隆tr,每次遍历都可以产生新的tr var clonedTr = tr.clone(); var _index = index; //循环遍历cloneTr的每一个td元素,并赋值 clonedTr.children("td").each(function(inner_index){ //根据索引为每一个td赋值 switch(inner_index){ case(0): $(this).html(_index + 1); break; case(1): $(this).html(item.caller); break; case(2): $(this).html(item.imsi); break; case(3): $(this).html(item.imei); break; case(4): $(this).html(item.osid); break; }//end switch });//end children.each //把克隆好的tr追加原来的tr后面 clonedTr.insertAfter(tr); });//end $each $("#cloneTr").hide();//隐藏id=clone的tr,因为该tr中的td没有数据,不隐藏起来会在生成的table第一行显示一个空行 $("#generatedTable").show(); }//end success });//end ajaxpost
相关文章推荐
- jquery ajax自动生成表格table基础
- asp.net JQuery Ajax WebService 搜索 自动匹配 动态生成表格 点击表格 获取表格内容
- Discuz!开发之后台表格table自动生成函数介绍
- 用js+xml自动生成表格的东西
- Django自动生成table name依据
- python之自动生成table网页(行列可指定)
- 简单自动生成表格方法
- 将Highcharts图表数据生成Table表格
- JQuery动态生成Table表格
- 根据JSON数据,自动生成Table
- JQuery Ajax动态生成表格
- Excel 应用07_自动生成Table和data作成_VBA
- bootstrap table th内容太多表格撑破(自动换行)
- html生成表格table
- 用js实现的一个根据内容自动生成表格的函数
- 根据Word表格自动生成SQL数据库脚本的VBScript代码
- 如何让table表格中td的内容自动换行
- 使用该JavaBean可以将数据在JSP页面中以表格的形式显示出来,并具有动态排序、动态生成查询、自动分页功能
- 解析WordprocessingML(二)通过数据集自动生成表格
- dwz table表格自动适应宽度