JavaScript实现根据数据自动生成HTML表格

作者:窗边听雨

时间:2026-10-23

浏览:111

本文介绍一个使用JavaScript实现的自动生成HTML表格的函数。该函数针对旧版IE浏览器对空单元格的渲染问题,将空内容转换为 占位符。同时支持当数据条数不足表格预设长宽时,自动使用空单元格填补剩余位置,确保表格结构完整。

文章目录

本文介绍一个使用JavaScript实现的自动生成HTML表格的函数。该函数针对旧版IE浏览器对空单元格的渲染问题,将空内容转换为 占位符。同时支持当数据条数不足表格预设长宽时,自动使用空单元格填补剩余位置,确保表格结构完整。

背景与需求分析

回顾早期ASP开发经历时,曾编写过一段根据数据库数据自动生成表格的代码。


该实现需满足以下具体需求:


第一,针对内容为空的情况,必须输出为"<td>&nbsp;</td>"。若不这样做,在IE浏览器中会出现显示异常,表现为IE将该单元格视为不存在。


第二,当实际输出的数据条数不等于表格预设的“长×宽”总容量时,需使用"<td>&nbsp;</td>"自动填补最后一行剩余的空余位置。



算法优化与实现

实现逻辑并不复杂。早期在ASP开发中,曾使用一种较为复杂的算法(即代码中的MakeTable2)。如今想到了一个更易于理解的算法(MakeTable1),并尝试用JavaScript重新实现。尽管测试发现两者效率相当,但鉴于MakeTable1代码更简洁且逻辑更易理解,最终选择采用第一种方案。


代码示例

具体实现代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     <html xmlns="http://www.w3.org/1999/xhtml">         <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>Untitled 1</title>     <style type="text/css">     .style1 {         font-size: x-small;     }     </style>     </head>         <body>     <span class="style1">          </span>     </body>         </html>   

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章