需要局部刷新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 = []; 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=[{},{}];