如何使用JavaScript为表格添加行并显示标题或文本？

没问题，我来帮你搞定用JavaScript给表格添加带标题行的需求！结合常见的表格标题布局（比如跨列居中的样式），我给你两个实用的实现方案，直接就能套用：

方案1：快速给现有表格添加跨列标题行 #

这个方案适合已经有现成表格的场景，直接在表格顶部插入一个跨列的标题行，样式可以按需调整：

首先是基础的HTML结构（假设你已经有类似的表格）：

<table id="myTable" border="1" cellpadding="8" cellspacing="0">
  <tr>
    <td>商品名称</td>
    <td>价格</td>
    <td>库存</td>
  </tr>
  <tr>
    <td>笔记本电脑</td>
    <td>5999</td>
    <td>12</td>
  </tr>
</table>
<button onclick="addTitleRow()">添加表格标题</button>

然后是JavaScript代码：

function addTitleRow() {
  // 1. 获取目标表格
  const table = document.getElementById('myTable');
  // 2. 创建新的标题行
  const titleRow = document.createElement('tr');
  // 3. 创建标题单元格，动态获取表格列数来设置跨列，避免硬编码
  const titleCell = document.createElement('td');
  const columnCount = table.rows[0].cells.length;
  titleCell.colSpan = columnCount;
  // 4. 设置标题文本和样式
  titleCell.textContent = '商品库存统计表';
  titleCell.style.backgroundColor = '#f5f5f5';
  titleCell.style.fontWeight = 'bold';
  titleCell.style.textAlign = 'center';
  titleCell.style.padding = '10px';
  // 5. 把单元格加到行里，再把行插入到表格最顶部
  titleRow.appendChild(titleCell);
  table.insertBefore(titleRow, table.firstChild);
}

方案2：语义化的标题行（推荐） #

如果追求更规范的HTML结构，建议把标题行放到<thead>标签里，用<th>代替<td>，这样不仅语义清晰，也更利于样式统一：

先加个CSS类来统一标题样式（比内联样式更易维护）：

.table-title {
  background-color: #e6f3ff;
  font-weight: 700;
  text-align: center;
  padding: 10px;
  font-size: 1.1em;
}

然后是JavaScript代码：

function addSemanticTitleRow() {
  const table = document.getElementById('myTable');
  // 检查表格是否已有thead，没有就创建一个
  let thead = table.querySelector('thead');
  if (!thead) {
    thead = document.createElement('thead');
    table.insertBefore(thead, table.firstChild);
  }
  // 创建标题行和th单元格
  const titleRow = document.createElement('tr');
  const titleCell = document.createElement('th');
  titleCell.colSpan = table.rows[0].cells.length;
  titleCell.textContent = '商品库存统计表';
  titleCell.classList.add('table-title'); // 用CSS类控制样式
  titleRow.appendChild(titleCell);
  thead.appendChild(titleRow);
}

注意事项 #

• 确保JS代码在表格加载完成后执行：可以把script标签放在<body>末尾，或者用DOMContentLoaded事件包裹代码，避免找不到表格元素。
• 如果要在表格中间插入标题行，只需要修改table.insertBefore的第二个参数，比如table.insertBefore(titleRow, table.rows[2])就能插在第三行前面。
• 如果你的表格是动态生成的，记得在表格渲染完成后再调用添加标题的函数。

内容的提问来源于stack exchange，提问作者hello_dn