如何選擇HTML表格

Question

更TR我有jQuery代碼：

$('td').hover(function() { 
    var t = $(this), 
      index = t.index(); // the position of the TD in the row, so you can find the one below it 
    t.addClass('hovered'); // apply hovered class to this TD... 
    t.nextAll(':lt(3)').addClass('hovered'); // ...and to the TD next to it... 
    t.closest('tr') 
    .nextAll(':lt(3)') 
    .find('td:eq(' + index + ')') 
    .addClass('hovered') 
    .nextAll(':lt(3)') 
    .addClass('hovered'); // ...and to the 2 below 
}, function() { 
    // remove the hovered class when no longer hovering 
    $(this).closest('table').find('td').removeClass('hovered'); 
}); 

JSFiddle DEMO

如何做出什麼選擇4x4的細胞？不是2x4 +2像演示。

Answer 1

嘗試

$('td').hover(function() { 
    var t = $(this), 
     index = t.index(); // the position of the TD in the row, so you can find the one below it 
    t.addClass('hovered'); // apply hovered class to this TD... 
    t.nextAll(':lt(3)').addClass('hovered'); // ...and to the TD next to it... 
    t.closest('tr').nextAll(':lt(3)').each(function(i,v){ 
     $('td:eq(' + index + ')', this).addClass('hovered').nextAll(':lt(3)').addClass('hovered'); // ...and to the 2 below 
    }) 
}, function() { 
    // remove the hovered class when no longer hovering 
    $(this).closest('table').find('td').removeClass('hovered'); 
}); 

演示：Fiddle

更簡化版本

$('td').hover(function() { 
    var t = $(this), 
     index = t.index(); // the position of the TD in the row, so you can find the one below it 

    var trs = t.closest('tr').nextAll(':lt(3)').addBack(); 
    trs.find('td:eq(' + index + ')').add(trs.find('td:gt(' + (index) + '):lt(3)')).addClass('hovered'); 
}, function() { 
    // remove the hovered class when no longer hovering 
    $(this).closest('table').find('td').removeClass('hovered'); 
}); 

演示：Fiddle

Answer 2

$('td').hover(function() { 
    var t = $(this), 
     index = t.index(); // the position of the TD in the row, so you can find the one below it 
    t.addClass('hovered'); // apply hovered class to this TD... 
    t.nextAll(':lt(1)').addClass('hovered'); // ...and to the TD next to it... 
    t.closest('tr').nextAll(':lt(1)').find('td:eq(' + index + ')').addClass('hovered').nextAll(':lt(1)').addClass('hovered'); // ...and to the 2 below 
}, function() { 
    // remove the hovered class when no longer hovering 
    $(this).closest('table').find('td').removeClass('hovered'); 
}); 

我將lt（3）更改爲lt（1）。看看這是你想要的。

看到的結果是：http://jsfiddle.net/FXy5J/3/

Answer 3

var selectY = 4, selectX = 4 

$('td').hover(function() {  
    var $cell = $(this), 
    $table = $cell.parents("table"), 
    x = $cell.index(), 
    y = $cell.parent().index(); 

    $table.find("tr:eq("+y+"),tr:gt("+y+"):lt("+(selectY-1)+")") 
     .find("tr:eq("+x+"),td:gt("+x+"):lt("+(selectX-1)+")") 
    .addClass("hovered"); 
}, function(){ 
    $(this).parents("table") 
    .find("td") 
    .removeClass("hovered");  
}); 

您可以用selectX選擇您所在地區和Y瓦爾太

http://jsfiddle.net/PKahK/2/

*更新，因爲GT似乎並沒有被接受-1：/