html中如何使用js动态添加表格_IT百科

一、动态加载表格

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

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

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

若在当前html文件中，则写在<script>标签内部，如

复制代码代码如下:

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

</script>

若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句

复制代码代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文李仔件

复制代码代码如下:

二、动态添加表格行

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

复制代码代码如下:

<table>

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

</table>

[\s\S ]*\n

2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下

[code]

row=document.createElement("tr")//创建行

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

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

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

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

这个只要你记住相关的标记就可以拍尘了。

记事本写入相关的HTML代码即可，插入表格是在网页的内容中插入即可。

<html>

<html>

标记属性大多都是双标记，即:有开头就要有结尾，列如:<body>、</body>/body就表示内容结束。

插入表格的话，只要把表格的标记放到body里面即可。

body就是网站的内容，也就是你打开网页露眼看到的内容。

<tr>

</tr>

<tr>

</tr>

</table>

<tr></tr>这个是行标记，<td><培粗/td>这个是列标记。只要你把<table border="1">到</table>，这段代码放到前面的<body></body>中间即可。

欢迎分享，转载请注明来源：内存溢出

html中如何使用js动态添加表格