利用JS在HTML表格中动态插入多行数据

作者:微光

时间:2026-10-24

浏览:476

本文介绍如何在HTML表格中通过JavaScript动态插入多行数据。虽然Table的tBodies属性并非数组且无sort方法,但可利用类似insertAdjacentHTML的思路,结合DOM API如insertRow和insertCell,或innerHTML/outerHTML操作,实现表格行的动态添加与更新,满足前端数据展示需求。

文章目录

HTML表格动态添加行的实现

 <html> <body> <table id=tableList border=1 width=100> <tr><td>1</td></tr> </table> <button onclick=addRow()>插入行</button> </body>  

注意:若通过外部脚本引入JS代码,通常需要刷新页面后代码才能生效执行。


HTML表格的tBodies属性返回的是一个集合对象,而非标准的JavaScript数组。这意味着它不具备数组特有的sort()排序方法,因此无法直接对该集合进行排序操作。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章