jQuery Table Columns / Rows Hide or Change color

Question

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

edited to show. But in the attribute mentioned it looks like testerTable::2 for example — chris
– chris, Commented Apr 25, 2012 at 21:16

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 25, 2012 at 21:31

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

craniumonempty · Accepted Answer · 2012-04-25 21:33:06Z

1

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.

edited Apr 25, 2012 at 21:33

answered Apr 25, 2012 at 21:17

craniumonempty

3,5352 gold badges22 silver badges18 bronze badges

3 Comments

chris Over a year ago

unfortunately colspan isn't supported by datatables, and can't be used currently. I wish it was as easy as colspan for me :-)

craniumonempty Over a year ago

@chris hmm, I just read a comment on their website that said the same thing (oh, about colgroup, not colspan), but they say nothing bad will happen if you use it. Maybe they should think about it.

chris Over a year ago

most of the tables I work with are dynamically generated through datatables, so adding in the col (group/span) is a bit more difficult all around (maybe not so much on newer tables we generate, but existing ones through out the sys), overall trying to come up with a solution to cover all bases.

Nick · Accepted Answer · 2012-04-25 21:24:01Z

0

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' :)

answered Apr 25, 2012 at 21:24

Nick

6,04512 gold badges57 silver badges81 bronze badges

3 Comments

chris Over a year ago

i know its spelled array but the variable name I gave is arry when I defined it through the spilt I did on the original attribute :) Ill have to see if datatables supports the notion of classing every column like that

Nick Over a year ago

Glad to know about the spelling :) Giving classes to table elements works fine, too, so you can do it this way, should you wish to.

Nick Over a year ago

You can't do it in one hit per column, though. You'd have to add the class to each td element.

Collectives™ on Stack Overflow

jQuery Table Columns / Rows Hide or Change color

3 Answers 3

demo jsBin

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related