本文介绍一个使用JavaScript实现的自动生成HTML表格的函数。该函数针对旧版IE浏览器对空单元格的渲染问题,将空内容转换为 占位符。同时支持当数据条数不足表格预设长宽时,自动使用空单元格填补剩余位置,确保表格结构完整。
本文介绍一个使用JavaScript实现的自动生成HTML表格的函数。该函数针对旧版IE浏览器对空单元格的渲染问题,将空内容转换为 占位符。同时支持当数据条数不足表格预设长宽时,自动使用空单元格填补剩余位置,确保表格结构完整。
背景与需求分析
回顾早期ASP开发经历时,曾编写过一段根据数据库数据自动生成表格的代码。
该实现需满足以下具体需求:
第一,针对内容为空的情况,必须输出为"<td> </td>"。若不这样做,在IE浏览器中会出现显示异常,表现为IE将该单元格视为不存在。
第二,当实际输出的数据条数不等于表格预设的“长×宽”总容量时,需使用"<td> </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需再刷新一下页面才能执行]