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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
Vue实现日历小插件
Jun 26 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
几种tab切换详解
2017/02/03 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python的等深分箱实例
2019/11/22 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
python MD5加密的示例
2020/10/19 Python
Python扫描端口的实现
2021/01/25 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
小学教师培训感言
2014/02/11 职场文书
设计顾问服务计划书
2014/05/04 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
大学副班长竞选稿
2015/11/21 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS