JavaScript清空table表格的两种实现方式
作者：窗边听雨时间：2026-10-29 09:50:32浏览：174
本文介绍JavaScript清空table表格的两种方法。第一种通过循环rows逐个删除，逻辑直观但效率较低；第二种利用outerHTML替换tbody内容，旨在解决innerHTML只读报错问题，但需注意可能影响动态插入行的副作用。
JavaScript清空表格方法概述
本文通过具体实例介绍JavaScript中清空table表格的实现方式，供读者参考。
常规循环删除法
1. 常规实现方案
该方法通过遍历table的rows集合，逐个执行删除操作。此方案逻辑可行，但执行效率不佳。
outerHTML替换法及注意事项
2. 替代实现方案
var artTable = document.getElementById("artical_table");
console.debug(artTable.getElementsByTagName("thead")[0]);
var artBody=artTable.tBodies[0];
//clear table
//artBody.innerHTML='';
//获取tbody，清除innerHTML来达到清除表格数据,会报错
artBody.parentNode.outerHTML = artBody.parentNode.outerHTML.replace(artBody.innerHTML, "");
//解决tbody的innerHTML只读问题,这种也会有问题，会导致后面动态插入的行没有希望上述内容能对JavaScript程序设计有所帮助。
作者最新文章
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33