和我一起深入了解 DOM「操作 Table」

「这是我参与11月更文挑战的第 28 天，活动详情查看：2021最后一次更文挑战」

操作 Table

在前后端开发不分家的那个时代，后端工程师最最习惯于使用 table 来开发表单、列表模块，那个时候很多的模版样式也是基本 table 开发，并且，绝大部分功能也是标准的增删改查

虽然 table 的性能让人诟病，但那是在极端的大量数据的情况下。用 table 应付日常的开发已经足够了，本文就着重聊聊用 js 如何操作 DOM 中的 table 元素

如下是一个常规的表单雏形：

<table border="1" width="100%">
    <tbody>
        <tr>
            <td>c1-1</td>
            <td>c2-1</td>
        </tr>
        <tr>
            <td>c2-1</td>
            <td>c2-2</td>
        </tr>
    </tbody>
</table>
复制代码

tbody 就是我们列表的数据显示行，由若干个 tr 组合，表示一条条行记录；tr 又由若干个 td 构成，表示这一行中的每一个小小的单元格

在操作 table 元素时，会涉及到如下的属性和方法：

tBodies，包含 tbody 元素的 HTMLCollection
tHead，指向 thead 元素
rows，包含表示所有行的 HTMLCollection
createTHead()，创建 thead 元素，放到表格中，返回引用
deleteTHead()，删除 thead 元素
deleteRow(pos)，删除给定位置的行
insertRow(pos)，在行集合中给定位置插入一行

操作 tbody 元素用得上属性和方法：

rows，包含 tbody 元素中所有行的 HTMLCollection
deleteRow(pos)，删除给定位置的行
insertRow(pos)，在行集合中给定位置插入一行，返回该行的引用

操作 tr 元素时的属性和方法：

cells，包含 tr 元素所有表元的 HTMLCollection
deleteCell(pos)，删除给定位置的表元
insertCell(pos)，在表元集合给定位置插入一个表元，返回该表元的引用

现在，使用上面提到的方法，我们往 DOM 上插入一个和本文开头一致的 table

这里有几个注意点：

① 是 tbody 标签需要我们通过通用的 document.createElement 来创建；

② 是每一行再使用之前，都需要通过类似于 tbody.insertRow(n); 的方式来初始化生成 tr 标签；

③ 每一行在对单元格做操作之前，如果单元格不存在，就必须先以类似于 tbody.rows[n].insertCell(m); 的方式初始化插入 td 标签

通过 tbody.rows[n].cells[m] 我们可以非常清晰的知道自己操作的是哪行哪列的单元格

至于单元格合并的情况，不过是修改对应 td 上的属性 colSpan, rowSpan 罢了

和我一起深入了解 DOM「操作 Table」

操作 Table

Guess you like