Question

是否有任何选择器，每列只选择第一个非空的单元格，即下面的代码示例中包含2,3和4的单元格？

<table>
  <tbody>
    <tr>
      <td></td>
      <td><span class='a'>2</span></td>
      <td><span class='a'>3</span></td>
    </tr>
    <tr>
      <td><span class='a'>4</span></td>
      <td><span class='a'>5</span></td>
      <td><span class='a'>6</span></td>
    </tr>
  </tbody>
</table>

我当前的解决方案有多个具有固定列号的选择器，这对于具有多列的表来说并不理想。

$('table tr td:nth-child(1) .a').first()
$('table tr td:nth-child(2) .a').first()
$('table tr td:nth-child(3) .a').first()

Answer 1

HTML表的结构方式，对于单元格而言，单元格无法知道它的列中的第n个单元格匹配或不匹配条件。

理想情况下，您需要类似于:nth-child(An+B of sel)的内容，但对于列中的单元格（或行，取决于您的看法），因为每个单元格元素都是行元素，因此:nth-child()不会有任何用处。但是，同样来自选择器-4的:nth-column()的工作方式也有所不同。此外，列是抽象的，因此它们无论如何都不匹配选择器 - 只有元素才有。

评论中有人提到缺少父选择器是导致这种情况不可能的原因。就个人而言，我想看看他们如何通过这样的功能实现这一目标，因为我不知道它与你的问题有什么关系。您并未尝试匹配单元格，行，tbody，表格或其他内容的父级。您正在尝试匹配单元格相对于其列，而不是它们的父/行（列组合器执行的操作，但仍然不适用于您的特定方案）。事实上，我刚才所说的正是解释了为什么这个论点毫无意义。

您可以做的最好的事情就是只计算表中的列数并遍历单元格，找到每列中非空的第一列。如果列数可能不同，或者您只是不想对所有内容进行硬编码，则必须以编程方式构建选择器（假设您最终以某种方式使用选择器 - 有多种方法可以通过编程方式解决此问题，但问题的关键在于：以编程方式执行此操作。）

Answer 2

如果您将Jquery Not选择器与Empty组合在一起，您可以选择所有非空的td元素。

首先，我遍历所有TR元素找到所有非空的td元素然后为第一个非空的td元素着色。

$('tr').each(function() {
  var $elem = $(this).find('td').not(":empty").first();
  $elem.css('background-color', "red");
});

td {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td></td>
      <td><span class='a'>2</span>
      </td>
      <td><span class='a'>3</span>
      </td>
    </tr>
    <tr>
      <td><span class='a'>4</span>
      </td>
      <td><span class='a'>5</span>
      </td>
      <td><span class='a'>6</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

如果你知道你的桌子会有多少列，那么你或许可以实现这一目标。它不会很漂亮，但你可以做到。

首先选择第一个单元格：td:first-child
...但仅限于非空：td:first-child:not(:empty)
现在，如果不为空，请选择第二个：td:nth-child(2):not(:empty)
...但仅当第一个为空时：td:first-child:empty+td:not(:empty)
第三个如果不是空的，但前提是前两个是空的：td:first-child:empty+td:empty+td:not(:empty)
...并使用新的+td:empty重复列，因为您可能会有前导空单元格。

然后将所有这些选择器与逗号连接在一起以形成多重选择器：

td:first-child:not(:empty),
td:first-child:empty+td:not(:empty),
td:first-child:empty+td:empty+td:not(:empty),
td:first-child:empty+td:empty+td:empty+td:not(:empty) {
    /* styles go here */
}

正如我所说，它真的不是很好的CSS。它应该做你想要的，但我不想要维护看起来那样的代码。

如果您事先并不知道您的表可能有多少个空单元格，那么这个想法也会有所下降，因为您需要编写CSS来支持尽可能多的空单元格。

所以说实话，我的建议是尽可能修改你的HTML代码，将类名放入你想要选择的元素中。这是一个更清洁的解决方案。

每个列中非空的第一个td的CSS选择器

3 个答案: