1

私は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 ではありません。

4

3 に答える 3

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(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/

于 2013-04-17T12:36:37.747 に答える
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');
});

デモ:フィドル

より簡略化されたバージョン

$('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');
});

デモ:フィドル

于 2013-04-17T12:37:48.880 に答える