动态生成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 = [];
                      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=[{},{}];