CODEWITHSUNDEEP
jquerycss
Cody
Cody

Reputation: 8944

Change background color of column based on header text

Problem: I need to change an entire column's background color if specific text is in the header td. I've tried several different ways with no luck.

I tried getting the header with:

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

That didn't work to even change the colors. That's where I'm currently stuck.

Upvotes: 1

Views: 6238

Answers (5)

Michael
Michael

Reputation: 3426

you could use table col. You should change the style property based on the value of the header on the server side.

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>

This method would require you to set the col on the server side.

Upvotes: -1

Zoli
Zoli

Reputation: 250

My code here:

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

Upvotes: 0

shaunsantacruz
shaunsantacruz

Reputation: 8930

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

Upvotes: 3

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Something like below will do the trick,

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; }

Upvotes: 0

Mathachew
Mathachew

Reputation: 2034

I had to wing what you were trying since you didn't provide many details, but here's a quick demo I put together on jsFiddle. The gist of it is:

.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');
});​

This will need to be updated to evaluate the text of the selected th, but maybe it's enough to get you started

Upvotes: 0

Related Questions