jquery ajax自动生成表格table(一)

首先在jsp页面设定一个table骨架,首先把该table的display属性设置为none，这样在加载页面的时候就不会显示出来，代码如下

<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(一)相关推荐

android 可编辑的表格框架,smartTable-一款android自动生成表格框架---A Android automatically generated table framework...
一款android自动生成表格框架功能介绍 1. 快速配置自动生成表格: 2. 自动计算表格宽高: 3. 表格列标题组合: 4. 表格固定左序列.顶部序列.第一行.列标题.统计行: 5. 自动统计,排 ...
java xml 画表格_用js+xml自动生成表格的东西
摘要:这篇JavaScript栏目下的"用js+xml自动生成表格的东西",介绍的技术点是"JS+XML.自动生成.XML.生成.js.自动",希望对大家开发技 ...
解析json自动生成表格
代码业务说明: 将一个含有学生信息的josn字符串中信息解析出来,并将里面的内容添加到表格中. 假设:从java程序后端传递进来一个如下json字符串 "{"total" ...
自动生成表格html,js实现自动生成表格功能的代码实例
js实现自动生成表格功能的代码实例发布时间:2020-07-18 17:45:52 来源:亿速云阅读:115 作者:小猪这篇文章主要讲解了js实现自动生成表格功能的代码实例,内容清晰明了,对此有 ...
android 如何生成表格,SmartTable：Android 自动生成表格框架
一款android自动生成表格框架功能介绍快速配置自动生成表格: 自动计算表格宽高: 表格列标题组合: 表格固定左序列.顶部序列.第一行.列标题.统计行: 自动统计,排序(自定义统计规则): 表格 ...
Android自动生成表格，丰富配置
前言写完了android图表,一个朋友说他们公司需要做表格.问我能做吗?我答这有啥不能做.我就开始几个吧唧吧唧写,快写完了,朋友说表格在android体验不好.坑壁啊,最好放在github上.通过这 ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
NaVicat Premium 字段设计怎么自动生成表格
NaVicat Premium 字段设计怎么自动生成表格期望效果我们写论文.设计文档的时候需要用到这种表格.如果一个个敲,表多是很烦的,有没有办法自动生成呢? 解决方法 (1) 查询结构先在数据 ...
python可以做表格文档吗_生活中的python-利用python-docx自动生成表格简化工作流程...
因为工作原因,需要经常往两个word模板里填写内容并生成新的word文件,模板大致如下图: 老的工作流程: 打开两个表,在表中对应位置填写个人信息,保存.这样一来,当需要填写的信息比较多的时候,工作就 ...
html 自动生成表格,HTML 表格生成
无标题文档 //var str=' Bill Gates '; /*表格头 function init(row, col) { var str=' for(var i=1;i<=row;i++) ...

jquery ajax自动生成表格table(一)

jquery ajax自动生成表格table(一)相关推荐

最新文章

热门文章