JS在HTML中如何生成动态的table, 表的列数也是根据JS中变量动态生成的？

var Date = ["2015-7-1", "2015-7-2", "2015-7-3"]; var Name = ["张三","李四","王五","赵六"];

如何让Date作为表头，让Name作为表的第一列，最后生成的table 的样子是这种的：

请问JS中有什么好的插件可以实现这种动态表的功能吗或者用JS该如何实现这种功能？？求大神指点迷津？？
我的表头和每一列的第一个值都是从JS的变量中获得的，当然，内容也是从JS的变量中获取的。

很抱歉，已经利用For循环解决了问题，却一直没有来结贴，现在把正确答案公布在这里：
var table = "

" + "" + "	" + date[i] + "
" + department[j] + "	" + SeriesStr[0].data[n] + "

";
$("#Exceltable").html(table);

http://blog.csdn.net/wearegouest/article/details/6161618

可以用模板渲染，就是先写好模板，在js中写方法把数据传入模板，这样对于相同布局的数据就可以实现动态更新了

建议使用easyUI的datagrid数据表格来实现，改前段js框架是基于jquery的，基本可以满足大部分的需求。

<!DOCTYPE html>

js实例

<br> table{text-align:center; font-size:24px; border:1px #CCC solid; }<br> table th{width:150px; border:1px #CCC solid;}<br> table td{width:150px; border:1px #CCC solid;}<br>

    </div>
</body>

var Date = ["2015-7-1", "2015-7-2", "2015-7-3"]; var Name = ["张三","李四","王五","赵六"]; var html = ""; html += "<table cellspacing=0>" + "<th></th>"; for(var i = 0, length = Date.length; i < length; i++){ html += "<th>" + Date[i] + "</th>"; } for(var i = 0, length = Name.length; i < length; i++){ html += "<tr>" + "<td>" + Name[i] + "</td>" + //在这里编写您的表格内容，如："<td>" + "你好" + "</td>"; "</tr>"; } html += "</table>"; document.getElementById("content").innerHTML = html;

 <!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <head>
        <title>
            js实例
        </title>
        <style type="text/css">
            table{text-align:center; font-size:24px; border:1px #CCC solid; }
            table th{width:150px; border:1px #CCC solid;}
            table td{width:150px; border:1px #CCC solid;}
        </style>
    </head>
    <body>
        <div id="content">

        </div>
    </body>
</html>
<script type="text/javascript">
    var Date = ["2015-7-1", "2015-7-2", "2015-7-3"]; 
    var Name = ["张三","李四","王五","赵六"];
    var html = "";
    html += "<table cellspacing=0>" + 
                "<th></th>";
    for(var i = 0, length = Date.length; i < length; i++){
        html += "<th>" + Date[i] + "</th>";
    }
    for(var i = 0, length = Name.length; i < length; i++){
        html += "<tr>" + 
                    "<td>" + Name[i] + "</td>" + 
                    //在这里编写您的表格内容，如："<td>" + "你好" + "</td>";
                "</tr>";
    }
    html += "</table>";
    document.getElementById("content").innerHTML = html;
</script>

结果如下：

 <!DOCTYPE html>
<html>
<body>

<table id='mytable' border='1'>
</table>
</body>
<script>
var Date = ["2015-7-1","2015-7-2","2015-7-3"]; 
var Name = ["张三","李四","王五","赵六"];
function createCols(){
   var table = document.getElementById('mytable');   
   var tr=document.createElement("tr");   
   var td=document.createElement("td");
   td.width = 20;
   tr.appendChild(td);
   for(var i=0;i<Date.length;i++){
      var td=document.createElement("td");
      td.innerHTML=Date[i];
      tr.appendChild(td);
   }
   table.appendChild(tr); 
}
function createRows(){   
   var table = document.getElementById('mytable');   
   for(var i=0;i<Name.length;i++){      
      var tr=document.createElement("tr");  
      var td=document.createElement("td"); 
      td.innerHTML=Name[i];
      tr.appendChild(td);   
      for(var j=0;j<Date.length;j++){
          var td=document.createElement("td"); 
          td.innerHTML=Date[j];
          tr.appendChild(td);   
      }
      table.appendChild(tr);    
   }
}
createCols();//列
createRows();//行
</script>
</html>

http://www.jb51.net/article/61894.htm
http://www.jb51.net/article/39705.htm
http://www.yuexw.com/jiaocheng/a/51/54744.htm

http://www.yuexw.com/jiaocheng/a/51/54744.htm

     var Date = ["2015-7-1", "2015-7-2", "2015-7-3", "2015-7-4", "2015-7-5"];
    var Name = ["张三", "李四", "王五", "赵六", "阿娇"];
    var Data = [['张三1','张三2','张三3','张三4','张三5']/*....*/];
    var html = '<table border="1"><tr><td>&nbsp;</td><td>' + Date.join('</td><td>') + '</td></tr>';
    for (var i = 0; i < Name.length; i++) {
        html += '<tr><td>' + Name[i] + '</td>';
        //下面的Name[i]+j改为你的数据，数据应该是二维数组，长度为Name的长度，子数组长度为Date的长度，如上面的给的Data示例那样
        for (var j = 0; j < Date.length; j++) html += '<td>' + Name[i] + j + '</td>';
        html += '</tr>';
    }
    html += '</table>';
    document.write(html)

var table = "

";
table += "";
for (var i = 0; i < date.length; i++) {
table += "";
}
table += "";
for (var j = 0; j < department.length; j++) {
table += "";
table += "";
for (var n = 0; n < date.length; n++) {
table += "";
}
}
table += "";
table += "
" + "" + " " + date[i] + "
" + department[j] + " " + SeriesStr[0].data[n] + "
";
$("#Exceltable").html(table);