2013-05-01 44 views
3

说我有如下表选择一系列TD细胞与jQuery

<table> 
    <tr><td> #TD1 </td><td> #TD2 </td></tr> 
    <tr><td> #TD3 </td><td> #TD4 </td></tr> 
    <tr><td> #TD5 </td><td> #TD6 </td></tr> 
    <tr><td> #TD7 </td><td> #TD8 </td></tr> 
    <tr><td> #TD9 </td><td> #TD10 </td></tr> 
    <tr><td> #TD11 </td><td> #TD12 </td></tr> 
    <tr><td> #TD13 </td><td> #TD14 </td></tr> 
</table> 

与jQuery,我如何选择

  1. #TD5,#TD7和TD9#?
  2. #TD6,#TD8和#TD10?

我对适应性解决方案很感兴趣,因为我的表可能在列和行中有所不同,我可能需要选择4行而不是3行。

到目前为止,我已经得到了

$("table tr:gt(1) td:nth-child(1)").css('color','red') 

但它不停止在#TD11

也见http://jsfiddle.net/2ygJk/

回答

1

这应该这样做。关键是要选择那些大于一个索引小于另一个索引行:

$("table tr:gt(1):lt(3) td:nth-child(1)").css('color','red'); // 5,7,9 
$("table tr:gt(1):lt(3) td:nth-child(2)").css('color','blue'); // 6,8,10 

http://jsfiddle.net/mblase75/EaZsG/

+1

这一定是我所遇到过的最丑陋的选择的一个(没有犯罪!):PI不想看到,在代码我正在努力.... – Lix 2013-05-01 16:49:44

+2

@Lix似乎对我很清楚。希望你不要对正则表达式产生同样的厌恶,因为无论它们是多么“丑陋”,它们都是不可或缺的。 – Blazemonger 2013-05-01 16:51:09

+0

Naaa ...正则表达式很漂亮;)选择器试图做的事很清楚 - 但是当我遇到像这样的复杂选择器时,我通常会退后一步并重新考虑我的逻辑或标记结构...只是我自己喜欢可读性我猜... – Lix 2013-05-01 16:52:38

2

jQuery Filter是你的朋友

var indexes = [5,7,9]; // the indexes you would like to filter out 

var filterdCelles = $('td').filter(function(i){ 
    return indexes.indexOf(i) > -1; 
}) 

然后你可以这样做:

filterdCelles.css('color','red'); // changes the font to this color 
+0

'filter'返回元素,如果条件为'true','return indexes.indexOf(index)> -1' – undefined 2013-05-01 16:55:07