文章摘要
文章介绍了HTML表格API这一被遗忘的功能,指出开发者可以直接操作表格元素(如行、列、表头等),无需重新渲染整个表格或使用innerHTML,既提升性能又更安全。文末提供了通过嵌套数组创建表格的代码示例。
文章总结
标题:被遗忘的网页遗产:你了解HTML表格API吗?
主要内容: 1. 开发者通常使用DOM方法或innerHTML来创建HTML表格,但后者存在安全隐患。实际上,HTML表格拥有一个鲜为人知的古老API。
- 这个API支持以下功能:
- 遍历表格元素
- 创建表体、行、单元格、表头、页脚、标题和摘要
- 直接访问表格单元格
- 局部更新表格而无需整体重绘
通过Codepen示例展示了如何用嵌套数组创建表格:
javascript let table = [['one','two','three'], ['four','five','six']]; let t = document.createElement('table'); table.forEach((row,ri) => { let r = t.insertRow(ri); row.forEach((l,i) => { let c = r.insertCell(i); c.innerText = l; }) });API特性说明:
- 支持通过索引访问单元格(如
t.rows[1].cells[1]) - 可动态增删行列(使用
insertRow(-1)在末尾添加行) - 当前限制:无法创建TH元素,所有单元格均为TD类型
- 作者建议:
- 该API值得重新审视并增强功能
- 可借鉴HTML表单的改进经验(如formData和change事件)
- 强化表格作为数据结构的地位,而非仅作为布局工具
(注:原文中的图片链接和部分代码细节已保留,但移除了与核心内容无关的描述)
评论总结
评论内容总结:
1. 表格布局的过时性
- 观点:部分开发者认为表格布局已被Flex和Grid取代,不再有使用场景。
- 引用:
- "Tables died (thankfully) to make room for flex and grid. I can't see any use case for them at all anymore."(评论1)
- "I remember doing this 25 years ago, but I assume (and hope) it's a huge minority who do this today?"(评论2)
2. 表格API的实用性与现代应用
- 观点:仍有开发者认为表格API在某些场景下非常实用,尤其是键盘导航和数据展示。
- 引用:
- "Using
rowsandcellsis very convenient for keyboard navigation across table cells."(评论4) - "I still use this pretty much everywhere to create HTML tables. Do people use something else now?"(评论10)
- "Using
3. 代码风格与可读性争议
- 观点:部分评论对示例代码的变量命名提出批评,建议使用更具描述性的命名。
- 引用:
- "Use full words for variable names!"(评论5)
- "The variable naming convention used here could be improved for clarity."(评论6)
4. 表格API的性能问题
- 观点:有开发者指出表格API在动态生成时性能较差,字符串拼接可能更快。
- 引用:
- "I vaguely remember this API being much slower than making rows/cells via strings."(评论11)
- "Re-rendering only happens when the current task queue element has been processed."(评论17)
5. 对现代框架与语义化的反思
- 观点:部分开发者认为现代开发过度依赖
<div>,导致语义化标记的缺失。 - 引用:
- "Not sure when it was (10-15 years ago), but at some point everything became
<div>s."(评论8) - "I had no clue that nowadays programmers don’t know about this, so I assume it’s supplanted by modern frameworks."(评论9)
- "Not sure when it was (10-15 years ago), but at some point everything became
6. 对API改进的期待
- 观点:部分开发者希望表格API能进一步改进,尤其是功能扩展(如搜索、排序等)。
- 引用:
- "There are no search, filter, sort, or selection features that you get."(评论16)
- "I’m curious what changes the author would like to see to the API."(评论7)
7. 怀旧与历史回顾
- 观点:部分开发者回顾了表格布局的历史意义及其对现代Web开发的影响。
- 引用:
- "Tables were the only way to create browser independent layouts dynamically."(评论18)
- "It was pretty common to have large one file websites: php and html with css and javascript mixed."(评论18)
8. 对其他API的担忧
- 观点:有开发者提到其他API(如IndexedDB)也可能面临被忽视的问题。
- 引用:
- "I feel like IndexedDB is becoming this abandonware as well."(评论15)
- "Will Google remove this API then if it’s abandoned?"(评论14)