2 hwtyggw88 hwtyggw88 于 2015.07.16 21:42 提问

JS在HTML中如何生成动态的table, 表的列数也是根据JS中变量动态生成的?
var Date = ["2015-7-1", "2015-7-2", "2015-7-3"]; var Name = ["张三","李四","王五","赵六"];

如何让Date作为表头,让Name作为表的第一列,最后生成的table 的样子是这种的:
图片说明

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

12个回答

hwtyggw88
hwtyggw88   2015.07.20 08:47
已采纳

很抱歉,已经利用For循环解决了问题,却一直没有来结贴,现在把正确答案公布在这里:
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);
wangcunhuazi
wangcunhuazi   2015.07.16 22:32
 <!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>

结果如下:
图片说明

danielinbiti
danielinbiti   Ds   Rxr 2015.07.16 22:32
 <!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>

CSDNXIAON
CSDNXIAON   2015.07.16 21:45

JS动态生成html表格
js动态生成级联下拉列表
动态生成table加CSS+js
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

oyljerry
oyljerry   Ds   Rxr 2015.07.16 21:50
jamejoe
jamejoe   2015.07.16 22:06

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

l745876299
l745876299   2015.07.16 22:18

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

wangcunhuazi
wangcunhuazi   2015.07.16 22:28

<!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;

图片说明

u012216727
u012216727   Ds   Rxr 2015.07.16 22:32
cuiwei1026522829
cuiwei1026522829   Ds   Rxr 2015.07.17 00:27
共12条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片