Really basic jQuery: how can I check to see if a table cell has a value?

Question

Been Googling this for over an hour, and getting answers to much more complex questions but not this simple one, and my Dummies book is no help.

I want to change the background of a row if a particular cell has a value. So:

$('#MyTable tr').each (function(index) {

    $(this).css('background-color', '#FCDCE4');

});

Works fine to change the bg color in every row, but how can I do this only in rows where column 30 has a value? I could probably give my target cell a css class and do it that way, but I'd really rather learn to use jQuery properly (so that I don't need to keep posting elementary questions).

possible duplicate of [How to get a table cell value using jquery?](http://stackoverflow.com/questions/376081/how-to-get-a-table-cell-value-using-jquery) — p.campbell, Feb 15 '12 at 14:35
As a general point: have you tried just reading the official documentation, rather than trying to google this? — Marcin, Feb 15 '12 at 14:36

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

Description

You can use jQuery .children() and .eq() to get the cell 30.

Note that .eq() is zero based, so you need to use 29 to get the 30th cell

Sample

$('#MyTable tr)').each (function(index) {
    var cell = $(this).children("td").eq(29)

    // your if condition

    $(this).css('background-color', '#FCDCE4');
});

More Information

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 15 '12 at 14:36

dknaack

60,192
27
155
202

Thank you, and I'll look at those links that you supplied - although some of that documentation is still a bit above me, I'm afraid. – Stanton Feb 15 '12 at 18:07

Brad Christie · Answer 2 · 2012-02-15T14:44:09.257

3

$('table td:nth-child(30):empty').each(function(){
  $(this).css('background-color','#FCDCE4'); // empty column
});

nth-child selector to grab the 30th column :empty to grab empty cells.

Example on jsFiddle can be found here: http://jsfiddle.net/pYA4U/

edited Feb 15 '12 at 14:44

answered Feb 15 '12 at 14:36

Brad Christie

100,477
16
156
200

The OP wants to change the background-color of the row, not the cell itself. – Šime Vidas Feb 15 '12 at 15:06
@ŠimeVidas: Use `$(this).closest('tr').css(...)` then. – Brad Christie Feb 15 '12 at 15:09
`$( this ).parent()` is fine too. – Šime Vidas Feb 15 '12 at 15:13
Thanks very much for your help. I ran across that 'nth child' syntax while I was looking, but I didn't think it was what I wanted. I'll go back and read up on it. – Stanton Feb 15 '12 at 18:03

Šime Vidas · Answer 3 · 2012-02-15T14:52:19.710

First, put the reference to the table inside a variable:

var table = $( '#myTable' )[0];

You probably want to keep this reference available throughout your application (so that all your methods have access to it).

var nr = 30; // the column number

$( table.rows ).each( function () {    
    if ( $( this.cells ).eq( nr - 1 ).text() ) {
        $( this ).addClass( 'selected' );
    }
});

So, if the 30. cell has any text-content, add the 'selected' class to the row.

Live demo: http://jsfiddle.net/2C6C7/

Really basic jQuery: how can I check to see if a table cell has a value?

3 Answers3

Description

Sample

More Information