js 根据Json数据的父子关系动态生成table 如图

JavaScript011

js 根据Json数据的父子关系动态生成table 如图,第1张

我就问一句,你的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,我再写代码。

1、先用js定义一个变量,就是一个字符串的变量,如图,字符串用逗号隔开。

2、要把字符串转化成数据,我们可以使用JS内置的方法,split方法就行了,这个方法要注意的地方,就是参数,由于字符串是用逗号隔开的,参数就输入逗号就行了。

3、为了验证效果,可以把结果输出到控制台上,使用console.log方法,把结果输出就行了。

在4、脚本里,直接调用刚才的方法,当页面打开后,就会直接执行。

5、打开浏览器的开发者工具,点击‘控制台’。

6、在这里就可以看到输出的结果了,可以看到这个结果就是一个数组。

7、点击展开这个数组,可以看到数组每一项的内容。