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

所属分类: 网络编程 / JavaScript 阅读数: 331
收藏 0 赞 0 分享
一、动态加载表格

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

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

<div id="tdl"><div>

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

若在当前html文件中,则写在<script>标签内部,如
复制代码 代码如下:

<script type="text/javascript" >

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文件
复制代码 代码如下:

<script type="text/javascript" src="test.js"></script>

二、 动态添加表格行

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

<table>
<thead></thead>

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

<tbody id="rows"></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>中


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

1. 我自己做了一下测试,html中写<table id="tdl'></table>,javascript中写 document.getElementById("tdl").innerHTML="<tr><td></td></tr>",这样写了之后进行测试,html中table的行不会添加。

2.做完上面的测试,我又改了一下html中写<table><tr><td id="t'><td><tr></table>,javascript中写document.getElementById("t").innerHTML="<p>content</p>",测试可以添加内容。

3.思考:从上面两个测试似乎可以得出点什么结论,该如何总结还没想好,哪样的标签可以直接通过innerHTML直接添加呢?
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多