源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-08-08 17:57 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript如何动态加载表格与动态添加表格行
[b]一、动态加载表格[/b] 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下 <div id="tdl"><div> 2.在javascript中写添加表格的语句 若在当前html文件中,则写在<script>标签内部,如
[u]复制代码[/u] 代码如下:
<script type="text/javascript" > document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建 </script>
若是通过引入js文件,则在js文件(假设是test.js)中直接写如下语句
[u]复制代码[/u] 代码如下:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
然后再引入自己的html文件
[u]复制代码[/u] 代码如下:
<script type="text/javascript" src="test.js"></script>
[b]二、 动态添加表格行[/b] 1.首先在html中为表格行的添加位置设置id,此位置必须是<tbody>内部(不是特别准确,但根据我的测试就得到此结论,有其他的方法请留言,谢谢),如下
[u]复制代码[/u] 代码如下:
<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直接添加呢?
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部