JavaScript表格常用操作方法汇总

在前端开发中，表格是常见的数据展示形式。JavaScript提供了许多操作表格的方法，使得我们可以对表格进行自定义样式、添加行列、排序等各种操作。本文将介绍一些常用的JavaScript表格操作方法，帮助读者更好地掌握前端开发技能。

1. 获取表格元素

使用document.getElementById()方法获取表格元素，例如：

var table = document.getElementById("myTable");

2. 增加行和列

使用insertRow()方法增加行，例如：

var row = table.insertRow(0); // 在第一行插入新行

使用insertCell()方法增加列，例如：

var cell = row.insertCell(0); // 在第一列插入新列

3. 删除行和列

使用deleteRow()方法删除行，例如：

table.deleteRow(0); // 删除第一行

使用deleteCell()方法删除列，例如：

row.deleteCell(0); // 删除第一列

4. 自定义样式

使用style属性设置样式，例如：

cell.style.backgroundColor = "red"; // 设置单元格背景色为红色

使用className属性设置类名，然后在CSS中定义样式，例如：

cell.className = "highlight"; // 设置单元格类名为highlight

.highlight {
    background-color: yellow;
}

5. 排序

使用sort()方法排序，例如：

var rows = table.rows; // 获取所有行
var sortedRows = Array.from(rows).slice(1).sort((a, b) => a.cells[0].textContent - b.cells[0].textContent); // 将除表头外的行按第一列数字大小排序
table.tBodies[0].append(...sortedRows); // 将排序后的行添加到表格中

6. 合并单元格

使用rowSpan和colSpan属性合并单元格，例如：

-- -------------------- ---- -------
------ -----------
  ----
    --- ------------------
    ----------
    ----------
  -----
  ----
    --- ------------------
  -----
--------

上述代码将会创建一个如下所示的表格：

以上是JavaScript表格常用操作方法汇总，希望能够帮助读者更好地掌握前端开发技能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2746