javascript如何动态加载表格与动态添加表格行_javascript技巧

Question

如题所述

Answer 1

一、动态加载表格

1.首先在html中为表格的添加位置设置id

即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下



2.在javascript中写添加表格的语句

若在当前html文件中，则写在标签内部，如
代码如下:


document.getElementById("tbl").innerHTML="" //此处添加的表格可根据自己需要创建



若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句
代码如下:
document.getElementById("tbl").innerHTML=""

然后再引入自己的html文件
代码如下:


二、 动态添加表格行

1.首先在html中为表格行的添加位置设置id，此位置必须是内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
代码如下:



//tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。




[\s\S ]*\n
2.在javascript内容中，要先创建行和单元格，再在中添加行，如下
[code]
row=document.createElement("tr"); //创建行

td1=document.createElement("tr"); //创建单元格

td1.appendChild(document.createTextNode("content")); //为单元格添加内容

row.appendChild(td1); //将单元格添加到行内

document.getElementById("rows").append(row); //将行添加到中


三、我的小发现（也许别人早知道了、、、）

1. 我自己做了一下测试，html中写
",测试可以添加内容。

3.思考：从上面两个测试似乎可以得出点什么结论，该如何总结还没想好，哪样的标签可以直接通过innerHTML直接添加呢？