jQuery在使用rowspan时选择列中的最后一个单元格答案

【问题标题】：jQuery to select last cell in a column when using rowspanjQuery在使用rowspan时选择列中的最后一个单元格
【发布时间】：2011-05-23 02:49:59
【问题描述】：

我有一张这样的桌子：

<table>
    <tr><td>Not This</td><td rowspan="3">This</td></tr>
    <tr><td>Not This</td></tr>
    <tr><td>Not This</td></tr>
    <tr><td>Not This</td><td>This</td></tr>
</table>

如何仅选择每行中最右侧的单元格（包含“This”）以便设置边框颜色？

我尝试了类似的方法：

table.find('tr > td:last-child').addClass('someclass');

但这会选择第 2 行和第 3 行的最后一个单元格，即使它们不是最右边的单元格。

我没有在我的桌子上使用边框折叠，并且希望避免它。

【问题讨论】：

我应该更清楚。 :gt(0) 解决方案适用于这个示例表，但我想要一个更通用的解决方案，因为我的表可以是可变单元格宽度。我想要最右边的（以 html 呈现的）单元格。
@Code Commander - 我相信我的解决方案会这样工作。
@Ender - 我的也会这样:)
@Bryan Downing - 抱歉，我不同意：jsfiddle.net/Ender/R97zz
@Ender - 见鬼，我不敢苟同。很好的解决方案！

标签： javascript jquery css-selectors html-table

【解决方案1】：

这个需要一点技巧：

$(function() {
    $('td:last-child[rowspan]').each(function() {
        $(this).parent().nextAll().slice(0,$(this).attr('rowspan')-1).addClass('skip');
    });
    $('tr:not(.skip) > td:last-child').addClass('someclass');
    $('.skip').removeClass('skip');
});

因此，您首先要查找任何 td，它是最后一个孩子并且具有 rowspan 属性。您遍历这些，计算每一行之后的行，并为每一行添加一个类以“跳过”它们。然后将您的类添加到不在“跳过”行中的最后一个子单元格，最后删除跳过类。

在这里演示：http://jsfiddle.net/Ender/rzqEr/

【讨论】：

是的。这行得通。 :) 看起来很复杂，但它是有道理的。使用 .skip 类而不是仅仅构建一个集合并使用类似的东西是否更快： $('tr').not(skipped).children('td:last-child').addClass('someclass');
我不确定.not() 是否可以这样工作。我认为您必须提供一个选择器字符串。
这样的事情似乎有效：jsfiddle.net/rzqEr/1 我不确定这是否更好，但它可以防止添加和删除临时类。（感谢您的解决方案，顺便说一句！）

【解决方案2】：

您应该可以像这样跳过第一个<td>：

$("table tr td:gt(0)").addClass('someclass');

【讨论】：

只有在一行中只有一个以跨行单元格结尾的单元格时才有效。
OP的桌子不就是这样吗？
是的，这是示例表，但我将请求读取为“选择最右边的单元格”（无论行长如何）。我猜我可能是错的，只是覆盖了我的基础:)
np Spolto，我会给你一个 +1，因为我像你一样阅读 OP：“这是我的数据，这就是我想要做的”并创建了一个解决方案来满足这些特定需求。

【解决方案3】：

你可以使用这样的东西，但是如果你有很多行，可能会是一个昂贵的查找：

$('table tr').each(function(){

  if( $('td',this).size() > 1 ){
    $(this).find('td:last-child').addClass('someclass');
  };

});

Here's a JSBin demo

您也可以这样做，以 Spolto 为例：

$('table tr').each(function(){

  $('td:gt(0)',this).addClass('someclass');

});

Another JSBin demo

【讨论】：

如果一行中有多个单元格以跨行单元格结尾，则这些解决方案都不起作用。示例 1：jsfiddle.net/Ender/hLUBg 和示例 2：jsfiddle.net/Ender/6x75q
给出的示例 html 是为 jQuery 解决方案编写的。除此之外没有提到（例如需要一种适用于任何数量的细胞的解决方案）。
不是强调这一点，而是找到适合示例的规则是本末倒置。好的编程的一部分是从杂项中挑选出需求（识别最右边的单元格）（在这个特定的例子中，有些行只有 1 个单元格）。如果这被认为是卑鄙或过于挑剔，我深表歉意，这不是故意的。

【解决方案4】：

这应该可行：

$("TD ~ TD:last-child").addClass('someclass');

在表格本身上设置边框可能也可以。

【讨论】：