如何用JS动态生成table标签写入到页面的DIV里

JavaScript034

如何用JS动态生成table标签写入到页面的DIV里,第1张

JS 语法向body中添加元素用innerHTML，下面是示例代码，供参考：

<script>

var div1 = document.getElementById('DIV1')

var code = '<TABLE>'

code += '<TR><TH>姓名</TH><TH>性别</TH></TR>'

code += '<TR><TD>张三</TD><TD>男</TD></TR>'

code += '<TR><TD>李三</TD><TD>女</TD></TR>'

code += '<TR><TD>王三</TD><TD>男</TD></TR>'

code += '<TR><TD>赵三</TD><TD>男</TD></TR>'

div1.innerHTML = code + '</TABLE>'

</script>

<body>

<div id='div1'></div>

</body>

但通常来说，开发者习惯动态的去添加行而非动态生成表格，因为表头基本都是固定的，每次都刷影响效率，故代码如下：

<script>

var div1 = document.getElementById('tb1')

var code = ''

code += '<TR><TD>张三</TD><TD>男</TD></TR>'

code += '<TR><TD>李三</TD><TD>女</TD></TR>'

code += '<TR><TD>王三</TD><TD>男</TD></TR>'

code += '<TR><TD>赵三</TD><TD>男</TD></TR>'

div1.innerHTML = code

</script>

<body>

<div>

<table>

<THEAD><TR><TH>姓名</TH><TH>性别</TH></TR></THEAD>

<TBODY id='tb1'></TBODY>

</table>

</div>

</body>

我汗，你的第一第二步骤只是产生一个table对象，还没有附加进HTML DOM,也就是document对象，所以你通过getElementById("mytable")那不到你的table对象。。。我汗，直接这样不就行了

var tr1 = table.insertRow() 3.//获得table的对象,并插入一行

我就问一句，你的json数据还会变化不？

如果不会，就傻傻地把 nodes数组里面的数据插到table里去。

如果变化的话，你这样的json数据结构真是不好，不容易自动化，重写一个json也比照着这样结构要省时间。比如：

var nodes = [

    { 

        id: 1,

        name: "file",

        son:    {

                id: 2, name: "file1", .....

                },

        .....

    },

    {

        id: 1,

        name: "file",

        son:    {

                id: 2, name: "file1", .....

                },

    }

]

像这样的结构，解析起来要容易得多。要是能改json，我再写代码。