当我们需要在JavaScript中动态生成表格时，通常需要向表格中添加行和单元格。但有时候我们需要在表格顶部添加一个行，例如用于展示表格标题或筛选器。
方法1：使用insertRow()方法
通过使用JavaScript内置的insertRow()方法，可以在表格顶部添加一行。具体实现步骤如下：
- 找到表格对象
let table = document.getElementById('table-id');- 创建新的table row对象，并设置其为表头
let header = table.createTHead(); let newRow = header.insertRow(0); // 插入新的行并将其作为表头
- 向新行中添加单元格
let newCell = newRow.insertCell(0); newCell.innerHTML = '表格标题';
完成以上步骤后，就能够在表格顶部添加一行了。
以下是完整的示例代码：
-- -------------------- ---- -------
------ --------------
----
------------
------------
-----
----
------------
------------
-----
--------
--------
--- ----- - ------------------------------------
--- ------ - --------------------
--- ------ - --------------------
--- ------- - ---------------------
----------------- - -------
---------方法2：使用HTML表格结构
除了使用JavaScript动态生成表格，我们还可以在HTML中使用<thead>标签来定义表头。通过这种方法，我们可以更容易地控制表格样式和内容。
以下是实现步骤：
- 在HTML中添加
<thead>标签，并设置表格标题
-- -------------------- ---- -------
-------
-------
----
--- ---------------------
-----
--------
-------
----
------------
------------
-----
----
------------
------------
-----
--------
--------其中，colspan="2"表示该单元格占据2列位置。
- 通过CSS样式修改表头样式，使其与表格内容区分开来
thead {
font-weight: bold;
background-color: #ccc;
}使用HTML结构创建表头可以更方便的进行样式调整，同时也能够更好地提高可读性。
以上就是在JavaScript中生成表格顶部添加行的两种方法，可以根据实际需求选择最适合的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15415