首页 > 代码库 > 动态生成table
动态生成table
需要局部刷新table的数据，就需要使用到js控制生成table:
html：table的表头是固定不变的。
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <title>动态生成列表</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <style> .table-th{ background-color: #4B4B4B; color:#e2e2e2; } #tableCell{ width:80%; margin:0 auto; text-align: center; } </style> <body> <div class="main"> <div class="tableCont"> <table id="tableCell"> <thead> <tr class="table-th"> <th>日期</th> <th>浏览量</th> <th>访客数</th> <th>IP数</th> <th>跳出率</th> <th>平均访问时长</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </body></html>
js：
$(function(){ var data =http://www.mamicode.com/ []; data[0] = {"date":"2014/9/27","visited":"440","guest":"300","ip":"198.168.1.1","jumout":"200","average":"200"}; data[1] = {"date":"2014/9/27","visited":"440","guest":"300","ip":"198.168.1.1","jumout":"200","average":"200"}; setTableValue(data); }); /* *function setTableValue(data) *动态设定后台数据 *data结构[{},{}]一维数组,每个元素存储一行参数json对象 *{date,visited,guest,ip,jumout,average} */ function setTableValue(data){ var tableDom = $("#tableCell>tbody"); tableDom.empty(); //清除表格旧数据 var i = 0;//用于遍历data数组 var TdString = ‘‘, TrDom = ‘‘, TdDom = ‘‘; for(;i < data.length;i++){ TrDom = $("<tr></tr>"); //行节点 TdString = "<td>"+data[i].date+"</td>" +"<td>"+data[i].visited+"</td>" +"<td>"+data[i].guest+"</td>" +"<td>"+data[i].ip+"</td>" +"<td>"+data[i].jumout+"</td>" +"<td>"+data[i].average+"</td>"; //为每行绑定新数据 TdDom = $(TdString); TrDom.append(TdDom); tableDom.append(TrDom);//逐行相加 } }
关键在于：data的格式：data=http://www.mamicode.com/[{},{}];
动态生成table
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。