CODEWITHSUNDEEP
jqueryhtmldatatablehtml-table
chris
chris

Reputation: 36947

jQuery Table Columns / Rows Hide or Change color

Right now I am playing with an idea where I want to change the color (maybe eventually remove/hide) a column or row of data right now my aim is the columns. So far I have it partly working but not entirely

with this:

$('#'+arry[0]+' tr td:eq('+arry[1]+')').css({"background-color":"FF0"});

I am able to effect the column but only one row, not all rows within that column, and it seems to be effecting the rows/columns within the "tbody" but not the "thead" or "tfoot" I need to effect all 3.

an example of the table I am working with looks like:

<table id="testerTable">
    <thead>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
        <th>Fourth</th>
        <th>Fifth</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

I'm thinking my approach is to simple, so I need some ideas. This will ultimately be used with datatables from datatables.net but first I need to figure out this part.

****EDIT****

The arry variable is currently take from the rel attribute of something else arry[0] is the tables id.. and arry[1] is the position of the column in this case 0-4

Upvotes: 1

Views: 2149

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

demo jsBin

var string= 'testerTable::2'; // your data // test with: 0,1,2,3,4
var arry= string.split('::'); // split to separate values

var $tr = $('#'+arry[0]+' tr');


$('#'+arry[0]+' th').eq(arry[1]).css({"background-color":"FF0"});

$tr.each(function(el){ // iterate through all 'tr' to find relative 'td' .eq()
  $(this).find('td').eq(arry[1]).css({"background-color":"FF0"});
});

Upvotes: 1

craniumonempty
craniumonempty

Reputation: 3535

I would use <colgroup> to color the columns as it would be quick and easy to manipulate.

http://www.w3schools.com/tags/tag_col.asp

An example, you could put:

<colgroup>
  <col style="background-color:FF0" />
  <col span="4" />
</colgroup>

and edit the entire colgroup with jquery or other means.

Upvotes: 1

Nick
Nick

Reputation: 6025

You could just give each element in column 1 the class 'c1' and then do $('.c1').css... This would save mucking about with th/tr/td distinctions. You'd do this for every column, of course.

And BTW, it's spelt 'array' :)

Upvotes: 0

Related Questions