ヘッダーテキストに基づいて列の背景色を変更します

問題：特定のテキストがヘッダーtdにある場合、列の背景色全体を変更する必要があります。私は運がないいくつかの異なる方法を試みました。でも、色を変更するために動作しませんでしたヘッダーテキストに基づいて列の背景色を変更します

$('td:contains(Sun)').addClass('.weekend');

：

は私がして、ヘッダーを取得しようとしました。それは私が現在立ち往生している場所です。

出典

2012-03-02 Cody

ケア？ –

は、ヘッダのテキストと特定のテキストが等しいかどうかを検証するだけです。必要に応じて背景色を変更します。あなたの問題はどこにありますか？ –

私はあなたの質問を得ることはありません。 – joakimdahlstrom

Fiddle

var txt = 'Header 2'; 
var column = $('table tr th').filter(function() { 
    return $(this).text() === txt; 
}).index(); 

if(column > -1) { 
    $('table tr').each(function() { 
     $(this).find('td').eq(column).css('background-color', '#eee'); 
    }); 
}

出典

2012-03-02 22:59:34 shaunsantacruz

-1

table colを使用できます。サーバー側のヘッダーの値に基づいてスタイルプロパティを変更する必要があります。

jsfiddle

<table> 
    <colgroup> 
     <col /> 
     <col /> 
     <col /> 
     <col style="background-color:red" /> 
     <col /> 
     <col /> 
    </colgroup> 
    <thead> 
     <tr> 
      <th>Head 1</th> 
      <th>Head 2</th> 
      <th>Head 3</th> 
      <th>Head 4</th> 
      <th>Head 5</th> 
      <th>Head 6</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Row 1</td> 
      <td>Row 2</td> 
      <td>Row 3</td> 
      <td>Row 4</td> 
      <td>Row 5</td> 
      <td>Row 6</td> 
     </tr> 
     <tr> 
      <td>Row 1</td> 
      <td>Row 2</td> 
      <td>Row 3</td> 
      <td>Row 4</td> 
      <td>Row 5</td> 
      <td>Row 6</td> 
     </tr>   
    </tbody> 
</table>

このメソッドは、サーバー側でCOLを設定するためにあなたを必要とします。

出典

2012-03-02 22:18:24 Michael

多くの詳細を提供していないので、私はあなたが試していたものを持っていましたが、here's a quick demo私はjsFiddleにまとめました。その要旨は次のとおりです。

.selected { 
    background-color: #ddd; 
} 

$('table th').click(function() { 
    var index = parseInt($(this).index(), 10) + 1; 
    $('.selected').removeClass('selected'); 
    $('table tbody tr :nth-child(' + index + ')').addClass('selected'); 
});

これは、選択された目のテキストを評価するために更新する必要がありますが、多分それはあなたが以下のような

出典

2012-03-02 22:22:53 Mathachew

何かがトリックを行います始めるには十分だ、

DEMO

JS：

$('document').ready(function() { 
    $('table thead th').click(function() { 
     var colIndex = $(this).index(); 
     $('table tbody tr').each(function() { 
      $(this).find('td').each(function(i) { 
       if (i == colIndex) { 
        $(this).addClass('selCol'); 
       } else { 
        $(this).removeClass('selCol'); 
       } 
      }); 
     }); 
    }); 
});

CSS：

.selCol { background-color: #c2c2c2; }

出典

2012-03-02 22:31:40

ここに私のコード：あなたがしようとしているものを共有するための

<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("table thead th").each(function(i,e){ 
    if($(e).text() == "Column2"){ 
     var ind = i + 1; 
    $(e).css("background-color", "red") 
    $('table tbody tr :nth-child(' + ind + ')').css("background-color", "red"); 
    } 
    }); 
    }); 
    </script> 
<head> 
<body> 
    <table> 
    <thead> 
    <tr> 
    <th>Column1</th> 
    <th>Column2</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>Apple Inc</td> 
    <td>AAPL</td> 
    </tr> 
    <tr> 
    <td>GoogleInc</td> 
    <td>GOOG</td> 
    </tr> 
    </tbody> 
    </table> 
    </body> 
</html>

出典

2012-03-02 22:49:31 Zoli

ヘッダーテキストに基づいて列の背景色を変更します

答えて

関連する問題