0

2 つのテーブルが並んでいます ( #table-desc-dataと#compare-table-data )。カーソルを #compare-table-data の上に置くと、# 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');
        });
4

3 に答える 3

0

より良いパフォーマンスが必要な場合は、次のような構造で ID を使用します。

| cell_1_1 | cell_1_2 |
| cell_2_1 | cell_2_2 |

たとえば、最初の列を強調表示する場合は、次のように jQuery セレクターを使用できます。

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

ID はブラウザによってもインデックス化され、高速です

于 2013-07-14T19:34:06.203 に答える