緩慢表列和行熒光筆

Question

我有並排2個表側（＃表降序數據和＃比較表數據），當光標懸停在＃比較表數據＃compare-table-data中的整個行和列都被突出顯示，並且＃table-desc-data中的匹配行也被認爲是。

我的代碼突出顯示了一些作品，但在一張大桌子上呆滯，有時並沒有突出顯示整行。有任何想法嗎？ （[的jsfiddle] [1] - 刪除。）

//code to highlight columns and rows 
     $("#compare-table-data td").hover(function() { 
      $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')'). 
      add($(this).parent()).addClass('compare-hover'); 
      var idx = $(this).closest('tr')[0].sectionRowIndex + 1; 
      $('#table-desc-data').find('tr:nth-child(' + idx + ')').find('td').addClass('compare-hover'); 
     }, 

     function() { 
      $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')'). 
      add($(this).parent()).removeClass('compare-hover'); 
      $('#table-desc-data').find('td').removeClass('compare-hover'); 
     }); 

Answer 1

如果你想更好的性能使用的ID中的結構是這樣的：

| cell_1_1 | cell_1_2 | 
| cell_2_1 | cell_2_2 | 

所以，比如當你想突出的第一列你可以使用jQuery選擇，如：

$('td[id^=cell_1_]') 

該ID還通過瀏覽器索引，並且更快

Answer 2

對於修復你的代碼來獲取每一行突出

添加到懸停輸入功能：

$(this).parent().find('td').addClass('compare-hover'); 

附加徘徊離開功能：

$(this).parent().find('td').removeClass('compare-hover'); 

這將不會影響呆滯雖然。但會讓你的行高興。

Answer 3

您可以簡單地使用tr:hover CSS來突出顯示一行。要突出顯示一列，您可以添加一個類到相應的col。

HTML示例：

<table> 
    <colgroup> 
     <col></col> 
     <col></col> 
     <col></col> 
    </colgroup> 
    <tr> 
     <td>A1</td> 
     <td>A2</td> 
     <td>A3</td> 
    </tr> 
    <tr> 
     <td>B1</td> 
     <td>B2</td> 
     <td>B3</td> 
    </tr> 
    <tr> 
     <td>C1</td> 
     <td>C2</td> 
     <td>C3</td> 
    </tr> 
</table> 

範例CSS：

table { 
    border-collapse: collapse; 
} 

table tr:hover { 
    background-color: grey; 
} 

col.hovered { 
    background-color: grey; 
} 

實例的jQuery：

$('td').on('mouseenter', function() { 
    var i = $(this).parent().children().index(this); 
    $('col').removeClass('hovered'); 
    $('col:nth-child('+(i+1)+')').addClass('hovered'); 
}); 

$('td').on('mouseleave', function() { 
    $('col').removeClass('hovered'); 
}); 

A jsFiddle can be found here

編輯：我覺得一個CSS選擇器tr:hover將比任何JavaScript解決方案更快 - 並且更可靠。通過將一個類附加到col而不是「某個列中的每個td」，您都可以節省自己循環遍歷某個列中的所有單元格。這將由瀏覽器的CSS引擎完成。刪除這個'懸停類'也很容易，因爲你只需要從所有col元素中移除類並重新將它應用到正確的列（一個簡單的任務），而不是循環遍歷所有的td來移除類，然後通過循環遍歷所有的td再次應用它。對於這兩種解決方案，我都沒有性能數據來支持它。

編輯2：要將一個類添加到第二個表中，它將快速變得雜亂無章。 jQuery部分會是這樣的。您需要對CSS做出的更改應該是顯而易見的：

$('td').on('mouseenter', function() { 
    var coli = $(this).parent().children().index(this); 
    var rowi = $(this).parent().parent().index($(this).parent()); 
    $('col').removeClass('hovered'); 
    $('col:nth-child('+(coli+1)+')').addClass('hovered'); 
    //Do the same trick for rows in 'the other table' 
    $('#table2 tr').removeClass('hovered'); 
    $('#table2 tr:nth-child('+(rowi+1)+')').addClass('hovered'); 
}); 

$('td').on('mouseleave', function() { 
    $('col').removeClass('hovered'); 
    $('#table2 tr').removeClass('hovered'); 
});