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


Posted in Javascript onNovember 27, 2013

一、动态加载表格

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直接添加呢?

Javascript 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 #Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 #Javascript
jquery checkbox实现单选小例
Nov 27 #Javascript
子页向父页传值示例
Nov 27 #Javascript
js改变文章字体大小的实例代码
Nov 27 #Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 #Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
用Flash图形化数据(二)
2006/10/09 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP读取Excel类文件
2017/05/15 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python中zip()方法应用实例分析
2016/04/16 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Django框架表单操作实例分析
2019/11/04 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
怎么写自荐书范文
2014/02/12 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
银行授权委托书范本
2014/10/04 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
总经理致辞
2015/07/29 职场文书