使用 jQuery 选择器获取一系列 table 单元格

Question

我正在尝试写入 jQuery select 或 select 一系列 table 单元格（minRow，minCol）到（maxRow，maxCol）。

我有一个 selector 适用于水平范围（第 1 列，第 2 行）到（第 3 列，第 2 行）
$('tr:lt(3):gt(1) td:lt(4):gt(0))')

但这对于相应的垂直范围（第 2 列，第 1 行）到（第 2 列，第 3 行）
$('tr:lt(4):gt(0) td:lt(3):gt(1)')
因为 td selector 不会循环遍历该行，它只会占用第一个

这个版本使用地图和每个作品
$('tr:lt(4):gt(0)').map( function() { return $(this).find('td:lt(3):gt(1)') } ).each( function() { /* this.do_something */ } );
但更丑

有什么优雅的方法可以做到这一点吗？

找到比 select 或 :lt():gt()

更优雅的范围的奖励积分

上面的横竖范围和一个块范围的例子在这个fiddlehttp://jsfiddle.net/jghaines/qeLhgw4f/4/

Answer 1

select 或 tr:lt(3):gt(1) td:lt(4):gt(0) 仅适用于单个行 selected。发生的事情是 tr:lt(3):gt(1) 将 return 第 3 行中的一组 td 个元素，td:lt(4):gt(0) 将 select 第二个、第三个和第四个 td 元素在 特定集合 .

中的索引

当您使用 select 或类似 tr:lt(4):gt(0) td:lt(3):gt(1) 时，多行被 select 编辑并且 select 相对于 [=60] 的集合复合=]ed（而不是每个单独的 td 元素）。 select或tr:lt(4):gt(0)return是一个集合，由第二行、第三行和第四行组成。基于此 returned 集，select 或 td:lt(3):gt(1) 将 select 第三个 td 元素按其在 特定集[中的索引] =57=].

换句话说，:gt()/:lt() select 或 select 索引大于或小于索引 的所有元素在匹配的集合中。您的 selector 没有按预期工作，因为元素是根据匹配集 selected（而不是每个单独的 td 元素）。

解决方案是在 tr:lt(4):gt(0)/td:lt(3):gt(1) 之间链接一个 .find() 方法。

换句话说，替换：

$('table#2 tr:lt(4):gt(0) td:lt(3):gt(1)').addClass('red');

与：

$('table#2 tr:lt(4):gt(0)').find('td:lt(3):gt(1)').addClass('red');

Updated Example

既然你想要一个替代组合 :lt():gt() 的方法，值得指出的是你可以使用 .slice() 方法：

例如，您可以替换：

$('table#2 tr:lt(4):gt(0) td:lt(3):gt(1)').addClass('red');

与：

$('table#2 tr').slice(1, 4).find('td:lt(3):gt(1)').addClass('red');

使用 jQuery 选择器获取一系列 table 单元格

Getting a range of table cells with jQuery selectors

jquery

jquery-selectors