当前位置:首页>正文

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

2023-04-09 12:45:05 互联网 未知

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

一、动态加载表格

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

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

ltdiv id="tdl"gtltdivgt

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

若在当前html文件中,则写在ltscriptgt标签内部,如

复制代码 代码如下:

ltscript type="text/javascript" gt

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

lt/scriptgt

若是通过引入js文件,则在js文件(假设是test.js)中直接写如下语句

复制代码 代码如下:

document.getElementById("tbl").innerHTML="lttablegtlttrgtlttdgtlt/tdgtlt/trgtlt/tablegt"

然后再引入自己的html文件

复制代码 代码如下:

ltscript type="text/javascript" src="test.js"gtlt/scriptgt

二、 动态添加表格行

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

复制代码 代码如下:

lttablegt
lttheadgtlt/theadgt

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

lttbody id="rows"gtlt/tbodygt

lt/tablegt
[sS ]*
2.在javascript内容中,要先创建行和单元格,再在lt.tbodygt中添加行,如下
[code]
row=document.createElement("tr") //创建行

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

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

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

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

ppt中如何在现有表格上加行

解决ppt中如何在现有表格上加行的步骤如下:
1.打开PPT,选择“新建幻灯片”。

2.点击“新建幻灯片”,建成一个新的幻灯片。

3.点击PPT上方的“插入”,选择“表格”。

4.点击“表格”,选择并点击插入表格,输入插入表格的行数和列数,并点击确定。

5.点击表格中的任意一行,右击鼠标,找到“插入行”,选择“在上方插入”。这样就解决了ppt中如何在现有表格上加行的问题了。