如何让textarea在表格切换时垂直填充所有行高度？

问题描述 #

需要实现一个带每行备注textarea的表格，搭配切换开关：开启开关时隐藏除第一个textarea外的所有元素，让第一个textarea填满合并后的所有行空间。目前切换复选框后，第一个textarea无法自动拉伸占据合并单元格的全部高度，且无法提前固定表格行数，不能用固定高度方案。

解决方案 #

通过CSS设置高度继承链，配合JavaScript优化切换逻辑，实现textarea自适应合并单元格高度：

1. 添加CSS样式

在HTML的<head>中加入以下样式，确保高度能从表格行传递到textarea：

.table tbody tr {
  height: 100%;
}
.table .note-cell {
  height: 100%;
}
.table .note-cell textarea {
  height: 100%;
  resize: none; /* 可选：禁用textarea拖拽调整高度，保持布局统一 */
}

2. 修改HTML结构

给第一个textarea所在的单元格添加专属类名，方便后续样式和JS操作：

<tr>
  <td>Luna</td>
  <td class="note-cell">
    <textarea class="form-control form-control-sm"></textarea>
  </td>
</tr>

3. 优化JavaScript逻辑

调整切换事件处理逻辑，同步控制单元格合并和textarea高度：

const toggleSwitch = document.querySelector("input[type=checkbox]");
const notes = document.querySelectorAll("textarea");
const firstNoteCell = notes[0].closest("td");

toggleSwitch.addEventListener("change", e => {
  const isChecked = e.target.checked;
  const totalRows = notes.length;

  // 设置第一个单元格的跨行列数
  firstNoteCell.rowSpan = isChecked ? totalRows : 1;
  // 切换textarea高度：开启时占满单元格，关闭时恢复默认
  notes[0].style.height = isChecked ? "100%" : "";

  // 隐藏/显示其余备注单元格
  for (let i = 1; i < notes.length; i++) {
    notes[i].closest("td").hidden = isChecked;
  }
});

原理说明 #

• CSS层面：通过让表格行、备注单元格、textarea依次继承100%高度，构建完整的高度传递链，确保textarea能自动填充单元格的可用空间。
• JavaScript层面：切换开关时，除了设置单元格的rowSpan和隐藏其他单元格，还同步调整第一个textarea的高度属性，使其在合并单元格时自动拉伸，关闭时恢复默认样式。

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