6

偶数列の強調表示に関するこの投稿を見ましたが、選択した列のみを強調表示できますか?

彼らが使用するコードは次のとおりです。

$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");

しかし、私はしたい: 注: はclass="highlight"選択した列にあるため、列 3 を選択class="highlight"すると、列 2 から削除され、列 3 に追加されます。jQuery は、選択した列に基づいてクラスを追加する必要があります。

<table class="tbl">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th class="highlight">
            Selected column so this should be highlighted
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td class="highlight">
            Selected column so this should be highlighted
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td class="highlight">
            Selected column so this should be highlighted
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
    </tr>
</table>
4

6 に答える 6

17

これを実現するには、jQuery tableHover プラグインを確認することをお勧めします。次に、このようなものを使用します

$('table.tbl').tableHover({
    colClass: 'hover', 
    clickClass: 'click', 
    headCols: true, 
    footCols: true 
});

編集：

このようなもの？

作業デモ - 任意のセルをクリックして、列を強調表示します

デモからのコード -

$(function() {
  var rows = $('table.tbl tr');  

  rows.children().click(function() {

    rows.children().removeClass('highlight');  
    var index = $(this).prevAll().length;  
    rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight');

  });
});
于 2009-07-17T14:28:20.613 に答える
4

すべてのセルにクラスを追加する代わりに、colgroups を使用することを検討しましたか?

私はつい最近、コルグループの威力を自分自身で見始めたばかりで、次のように機能します。

.highlight {
    background-color: yellow; 
 }
     <table id="myTable">
    	   
    	       <colgroup class="highlight"></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	   
    	    <thead>
    	       <tr>
    	           <th>header1</th>
    	           <th>header2</th>
    	           <th>header3</th>
    	           <th>header4</th>
    	           <th>header5</th>
    	       </tr>
    	    </thead>
    	    <tbody>
    	       <tr>
    	           <td>cell a</td>
    	           <td>cell b</td>
    	           <td>cell c</td>
    	           <td>cell d</td>
    	           <td>cell e</td>
    	       </tr>
        	<tbody>
     <table>

これにより、5 列のテーブルがレンダリングされます。1 列には最初の列を強調表示するための CSS クラスがあります。したがって、実際に行う必要があるのは、各セルのホバーに関数を追加して、強調表示クラスを対応する colgroup に追加することだけです。

ここで見つけることができる完全なビデオガイドがあります:テーブル修正ヘッダー、および行 + 列の強調表示。

*無関係だったので回答を編集しました。質問を間違って読んで、まったく別の問題に回答しました。(正しい回答を追加しました)

于 2009-07-17T15:01:17.830 に答える
3

テーブルに十字線効果を追加するために使用するものは次のとおりです。

$('tbody td').hover(function() {
    $(this).closest('tr').find('td,th').addClass('highlight');
    var col = $(this).index()+1;
    $(this).closest('table').find('tr :nth-child('+col+')').addClass('highlight');
}, function() {
    $(this).closest('tr').find('td,th').removeClass('highlight');
    var col = $(this).index()+1;
    $(this).closest('table').find('tr :nth-child('+col+')').removeClass('highlight');
});

ただし、大きなテーブルでは実行が少し遅くなるようです (強調表示が遅れます)。

于 2012-01-30T23:58:40.210 に答える
1

colspanと をサポートしたい場合はrowspan、最初にテーブル セル インデックスを作成する必要があります。マークアップに関係なく、すべての行のセル位置を識別するマトリックス。次に、対象のすべてのテーブル セルのイベントを追跡し、垂直方向のインデックスを共有するマトリックスと列のオフセットを計算する必要があります。

結果のルックアップは、次のアニメーションに示されています。

全表索引

列のイベントwholly.mouseenterとイベントをトリガーするプラグインを作成しました。完全に。wholly.mouseleave

于 2014-04-06T17:47:38.150 に答える
1

テーブル ヘッダーにリンクを作成すると、次のようなことができます。

$("table.tbl th a").click(function() {
   var colnum = $(this).closest("th").prevAll("th").length;

   $(this).closest("table").find("tr td").removeClass("highlight");
   $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight");
}

これにより、クリックされたリンクの下のすべてのセルが「ハイライト」クラスに設定されます。

もちろん、CSS ファイルで正しいスタイルを設定する必要があります。

table.tbl tr .highlight {  background-color: blue; }
于 2009-07-17T14:40:24.300 に答える
0

Wholly というプラグインを使用できます。ここで統合方法に関する完全なチュートリアルを読むことができます http://voidtricks.com/wholly-jquery-plugin/

于 2014-05-05T06:40:40.677 に答える