HTML表格搜索后rowspan属性值错位问题求助

问题现象 #

使用了<td rowspan>的HTML表格添加搜索功能后，搜索“Washington”时，ABC列的“MONKEY”和“LION”会消失，DEF列的内容会偏移到ABC列位置，导致表格布局混乱。

问题根源 #

原搜索逻辑仅单独显示匹配到的行，但带rowspan的单元格只存在于每组数据的第一行。当匹配到组内后续行时，第一行被隐藏，rowspan单元格无法渲染，表格列数不匹配，引发布局错位。

修复方案 #

修改搜索逻辑，先标记每个行所属的rowspan分组，只要分组内任意一行匹配搜索关键词，就显示该分组的所有行：

function searchTable() {
  const input = document.getElementById("searchInput");
  const filter = input.value.toUpperCase();
  const table = document.getElementById("example_full");
  const trList = Array.from(table.querySelectorAll("tbody tr"));
  let hasMatch = false;

  // 标记所有行所属的rowspan分组
  let currentGroup = [];
  let currentRowspan = 0;
  trList.forEach((tr) => {
    if (currentRowspan > 0) {
      currentGroup.push(tr);
      currentRowspan--;
    } else {
      // 结束上一个分组，初始化新分组
      if (currentGroup.length > 0) {
        currentGroup.forEach(row => row.group = currentGroup);
      }
      currentGroup = [tr];
      const firstTd = tr.querySelector("td:first-child");
      currentRowspan = parseInt(firstTd?.getAttribute("rowspan")) || 1;
      currentRowspan--; // 减去当前行
    }
  });
  // 处理最后一个分组
  if (currentGroup.length > 0) {
    currentGroup.forEach(row => row.group = currentGroup);
  }

  // 执行搜索匹配
  trList.forEach(tr => {
    tr.style.display = "none";
    let isMatch = false;
    tr.querySelectorAll("td").forEach(td => {
      const txtValue = td.textContent.trim().toUpperCase();
      if (txtValue.includes(filter)) {
        isMatch = true;
      }
    });
    if (isMatch) {
      // 显示当前分组的所有行
      tr.group.forEach(row => row.style.display = "");
      hasMatch = true;
    }
  });

  // 控制无匹配提示的显示状态
  document.getElementById("noMatch").style.display = hasMatch ? "none" : "block";
}

完整代码示例 #

CSS 样式

.no-match {
  display : none;
  color   : red;
}

th {
  border-left   : 1px solid #dddddd;
  border-top    : 1px solid #dddddd;
  border-bottom : 1px solid #dddddd;
  border-right  : 1px solid #dddddd;
  background-color: darkgray;
}

td {
  border: 1px solid #dddddd;
}

HTML 结构

<input type="text" id="searchInput" placeholder="Search for records..." onkeyup="searchTable()" />
<p id="noMatch" class="no-match">No matching records found</p>

<table id="example_full" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>ABC</th>
      <th>DEF</th>
      <th>GHI</th>
      <th>XXX</th>
      <th>MMM</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4" style=" vertical-align: middle;">MONKEY</td>
      <td>AD123</td>
      <td>434SDD</td>
      <td>DFDDFF</td>
      <td>FDFFD</td>
    </tr>
    <tr>
      <td>LEMON</td>
      <td>&nbsp;</td>
      <td>FDFGGF</td>
      <td>DFFDF</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>FDDFF</td>
      <td>Edison</td>
    </tr>
    <tr>
      <td>FDDFFDF</td>
      <td>&nbsp;</td>
      <td>East</td>
      <td>Washington</td>
    </tr>
    <tr>
      <td rowspan="3" style=" background-color: #F9F9F9; vertical-align: middle;">LION</td>
      <td>GFFG</td>
      <td>FGFGG</td>
      <td>FGFG</td>
      <td>FGGFGFG</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>FGHGH</td>
      <td>DDDFF</td>
    </tr>
    <tr>
      <td></td>
      <td>test2</td>
      <td>FFGGFH</td>
      <td>Washington</td>
    </tr>
  </tbody>
</table>

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