CODEWITHSUNDEEP
jqueryjquery-selectors
coffeemonitor
coffeemonitor

Reputation: 13150

jquery select table columns

I am working on selecting a specific table's cells.

Some cells have a class of "testOff", and I'm attempting to change the table row to a different color, if the class exists.

here's what I have so far:

$("table#customersTable td.testOff").each(function(){

    $(this).closest("tr").css("background-color","#F6CCDA");

});

I must be missing something, since it's not showing the background color for any of the cells. Does anyone see an error with how I'm selecting?

Upvotes: 0

Views: 520

Answers (4)

clairesuzy
clairesuzy

Reputation: 27674

$("td.testOff").parent().children().css("background-color","#F6CCDA");

as per my earlier question, just in case it's the td cells themselves you need to target to override a previous setting

siblings() as I also mentioned in my comments, would only select the cells on either side of the .testOff - this finds all the children of it's parent tr

Upvotes: 0

David Thomas
David Thomas

Reputation: 253496

You could use something like:

$('td.testOff').closest('tr').addClass('highlightColour');

CSS:

.highlight,
.highlight td /* this part's important, and ensures that the 'highlight' colour is seen in the td elements */
{ 
    background-color: #ffa;
}

JS Fiddle demo.

Incidentally: you don't need the each(), as the selector will return, and work with, an array of elements already.

References:

Upvotes: 1

yoavmatchulsky
yoavmatchulsky

Reputation: 2960

You can use the :has selector:

$('#customersTable tr:has(td.testOff)').css('background-color', '#f6ccda');

Upvotes: 1

mcgrailm
mcgrailm

Reputation: 17640

$('#customersTable td.testOff').closest('tr').addClass('highlightColour').css("background-color","#F6CCDA");

working demo

Upvotes: 0

Related Questions