使用JavaScript/jQuery选择evo-table中合并单元格后每行的首单元格

根据你描述的表格结构（包含两个rowspan=4的单元格，后续4行每行两个单元格），这里提供几种可靠的jQuery方案来选中所有目标首单元格：

方法1：基于行位置的精确选择 #

如果目标行是第一个包含rowspan单元格的行之后的4行，可以直接通过行的位置来定位：

// 选中.evo-table中除第一行外的所有行的第一个td
$(".evo-table tr:not(:first-child) td:first-child").css("background", "lightgreen");

这个方法适合表格结构固定的场景，只要目标行是从第二行开始的4行，就能准确选中。

方法2：通过排除含rowspan的行来选择 #

如果表格结构可能有变化，但目标行都是不包含rowspan单元格的行，可以用属性选择器排除含rowspan的行：

// 选中.evo-table中所有没有带rowspan属性的td的行的第一个td
$(".evo-table tr:not(:has(td[rowspan])) td:first-child").css("background", "lightgreen");

这个方法更健壮，不管 rowspan 行在哪个位置，只要目标行没有 rowspan 单元格，就能被选中。

方法3：结合你已有的.highlight选择器 #

如果你需要保留和.highlight元素的关联，可以先找到它所在的行，再选中当前行的目标单元格+后续所有行的目标单元格：

// 找到.highlight所在的行
const highlightRow = $(".highlight").closest("tr");
// 选中当前行.highlight的下一个td，加上后续所有行的第一个td
highlightRow.find(".highlight").next()
  .add(highlightRow.nextAll("tr").find("td:first-child"))
  .css("background", "lightgreen");

这个方法完美衔接你之前的代码逻辑，同时覆盖剩下的3行目标单元格。

示例验证 #

假设你的表格结构如下：

<table class="evo-table" border="1">
  <tr>
    <td rowspan="4">Rowspan 1</td>
    <td rowspan="4">Rowspan 2</td>
    <td class="highlight">Highlight Cell</td>
    <td>目标单元格1</td>
  </tr>
  <tr>
    <td>目标单元格2</td>
    <td>其他内容</td>
  </tr>
  <tr>
    <td>目标单元格3</td>
    <td>其他内容</td>
  </tr>
  <tr>
    <td>目标单元格4</td>
    <td>其他内容</td>
  </tr>
</table>

使用上述任意一种方法，都能把4个目标单元格的背景设为浅绿色。

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