CODEWITHSUNDEEP
jqueryhtml-table
user503853
user503853

Reputation:

How to change the background color of a column in html table by th id?

I want to using jQuery to change the background color of a column by th id.

The html table:

<table id="financial_table" style="background-color:#EEE;">
   <tbody>
      <tr>
         <th>Date</th>
         <th id="1041051600000">12 2002</th>
         <th id="1072587600000">12 2003</th>
         <th id="1104210000000">12 2004</th>
         <th id="1135746000000">12 2005</th>
         <th id="1167282000000">12 2006</th>
         <th id="1198818000000">12 2007</th>
         <th id="1230440400000">12 2008</th>
         <th id="1261976400000">12 2009</th>
         <th id="1293512400000">12 2010</th>
         <th id="1325048400000">12 2011</th>
      </tr>
      <tr>
         <td>Share</td>
         <td>12.1</td>
         <td>14.08</td>
         <td>15.97</td>
         <td>16.98</td>
         <td>18.14</td>
         <td>21.2</td>
         <td>22.67</td>
         <td>22.43</td>
         <td>22.38</td>
         <td>23.77</td>
      </tr>
       
       <tr>
         <td>Revenue</td>
         <td>12.1</td>
         <td>14.08</td>
         <td>15.97</td>
         <td>16.98</td>
         <td>18.14</td>
         <td>21.2</td>
         <td>22.67</td>
         <td>22.43</td>
         <td>22.38</td>
         <td>23.77</td>
      </tr>
   </tbody>
</table>​

jQuery:

$(function() {
   $('#1135746000000').css('background-color','blue');
});​

I know it can only change the th background where id is 1135746000000. I want to change the whole column background color with this th id.

Example fiddle

Upvotes: 1

Views: 8187

Answers (4)

Andreas
Andreas

Reputation: 21911

Combine .index() and the :nth-child() selector

.index()

Search for a given element from among the matched elements.

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

:nth-child()

Selects all elements that are the nth-child of their parent.

Because jQuery's implementation of :nth-selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1.

A possible solution can then look like this:

// get the index of the column
var colIdx = $("#1041051600000")​​.index();

// grab all <td> and <th> elements from the (colIdx + 1) column
$("td, th").filter(":nth-child(" + (colIdx + 1) + ")")
           .css("background-color", "red")​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​;


var colIdx = $("#1041051600000").index();

$("td, th").filter(":nth-child(" + (colIdx + 1) + ")")
           .css("background-color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tbody>
      <tr>
         <th>Date</th>
         <th id="1041051600000">12 2002</th>
         <th id="1072587600000">12 2003</th>
         <th id="1104210000000">12 2004</th>
      </tr>
      <tr>
         <td>Share</td>
         <td>12.1</td>
         <td>14.08</td>
         <td>15.97</td>
      </tr>
       <tr>
         <td>Revenue</td>
         <td>12.1</td>
         <td>14.08</td>
         <td>15.97</td>
      </tr>
   </tbody>
</table>

Upvotes: 9

Muthu Kumaran
Muthu Kumaran

Reputation: 17930

Try this,

$('#1135746000000, td:nth-child('+($("#1135746000000").index()+1)+')').css('background-color','blue');

Demo: http://jsfiddle.net/U8LxX/2/

Upvotes: 2

Lost in the sauce
Lost in the sauce

Reputation: 31

Here you go... give this a read and see if it helps you out

How To: Change the row and column colors of a table using jQuery

Upvotes: 0

A.M. D.
A.M. D.

Reputation: 928

You need to determine the THs index in terms of the table's rows, then apply the same rule to TDS with the same index.

So if you determine that the TH 1041051600000 needs styling, find out that its the first in the row, and use that number to style your TDs going down the rows.

Upvotes: 0

Related Questions