javascript如何动态加载表格与动态添加表格行
作者：互联网
2025-08-29
Javascript教程
一、动态加载表格
1.首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
2.在javascript中写添加表格的语句
若在当前html文件中，则写在
若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句
复制代码代码如下:
document.getElementById("tbl").innerHTML="
然后再引入自己的html文件
复制代码代码如下:
二、 动态添加表格行
1.首先在html中为表格行的添加位置设置id，此位置必须是
内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下复制代码代码如下:
[/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); //将行添加到
中三、我的小发现（也许别人早知道了、、、）
1. 我自己做了一下测试，html中写
3.思考：从上面两个测试似乎可以得出点什么结论，该如何总结还没想好，哪样的标签可以直接通过innerHTML直接添加呢？ 相关标签:
Javascript教程
相关推荐 专题 + 收藏 + 收藏 + 收藏 + 收藏 + 收藏 最新数据 相关文章 最新版vue3+TypeScript开发入门到实战教程之路由详解二 03/28
src-components调用链与即时聊天组件树 03/28
从0开始设计一个树和扁平数组的双向同步方案 03/28
拒绝 rem 计算！Vue3 大屏适配，我用 vfit 一行代码搞定 03/28
Home双router-view与布局切换逻辑 03/28
uniapp uview-plus 自定义动态验证 03/28
Vue3 单元测试实战：从组合式函数到组件 03/28
VUE-组件命名与注册机制 03/28
VTJ.PRO 在线应用开发平台概览 03/28
v0.dev 支持 RSC 了！AI 生成全栈组件离我们还有多远？ 03/28
AI精选 |
