javascript如何动态加载表格与动态添加表格行
更新时间：2013年11月27日 16:06:49 作者：
在某些时候需要动态加载表格与动态添加表格行，在接下来的文章中将为大家介绍下javascript是如何做到的，感兴趣的朋友不要错过
一、动态加载表格
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直接添加呢？
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直接添加呢？
相关文章
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
这篇文章主要介绍了微信小程序BindTap快速连续点击目标页面跳转多次问题处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
在项目中有时会遇到大文件上传，经常会出现链接超时的问题，所以就需要使用文件分片上传的方式来上传大文件。下面通过本文给大家介绍js异步文件分片断点上传的实例代码，需要的的朋友参考下吧2016-12-12
这篇文章主要为大家详细介绍了一些你不知道的JavaScript闭包相关知识，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，感兴趣的可以跟随小编一起学习一下2022-11-11
本文主要介绍了NodeJs创建Web服务器；Express创建Web服务器的两种方法，具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了JavaScript实现一个输入框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章介绍了js获取或设置当前窗口url参数的小例子，有需要的朋友可以参考一下2013-10-10
这篇文章主要介绍了js类的继承定义与用法,结合实例形式分析了javascript关于类的定义与继承的相关使用技巧,需要的朋友可以参考下2019-06-06
JavaScript中toLocaleString()和toString()的区别实例分析
这篇文章主要介绍了JavaScript中toLocaleString()和toString()的区别,结合实例形式对比分析了toLocaleString()和toString()针对字符串、数组与日期操作过程中的区别与使用技巧,需要的朋友可以参考下2018-08-08
说到树形菜单，貌似一般是用在一些管理系统里面的，我是还没有用到过，有些zTree之类的插件已经做得比较好了2011-12-12
这篇文章主要为大家详细介绍了微信小程序表单弹窗实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
最新评论