栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

一、动态加载表格

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

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



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

若在当前html文件中,则写在

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

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


二、 动态添加表格行

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



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




[sS ]*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); //将行添加到中


三、我的小发现(也许别人早知道了、、、)

1. 我自己做了一下测试,html中写
2.做完上面的测试,我又改了一下html中写

3.思考:从上面两个测试似乎可以得出点什么结论,该如何总结还没想好,哪样的标签可以直接通过innerHTML直接添加呢?
转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号