JQuery loop each <td> in <tr>

Question

I Have the JQuery code below. Basically trying to find the empty string in a td tag and add css to the tr tag, but it adds css to ALL rows not the row that has the empty string. Thank you in advance.

$('#mytable > tbody  > tr').each(function(){  
    var $nthis = $(this);

    $('td:first-child').each(function() {
        var $firsttd = $(this);
        console.log($firsttd.text());
    });

//back in the <tr> level
if ($firsttd.text() == "")
    $nthis.css('border-top','solid 2px blue'); 

}); //end of main func

thank you for your responses, i should have been clearer. each td tag contains an input tag. so i don't think i can use :empty, also not strictly the first td i'm looking for, any td in the tr that has .text() == "" — shyamo
– shyamo, Commented Nov 7, 2014 at 14:11
sorry i meant im looking for the FIRST td in the tr that has .text() == "" but for all rows — shyamo
– shyamo, Commented Nov 7, 2014 at 14:17

XCS · Accepted Answer · 2014-11-07 12:55:54Z

2

Use :first-child CSS3 selector to get the first td, and then :empty CSS3 selector to only retrieve the empty tds.

$(function () {
    $('#mytable > tbody  > tr td:first-child:empty').each(function(){  
        $(this).parent().css('border-top','solid 2px blue');
    });
});

http://jsfiddle.net/7n20ast0/

You can make it even shorter by removing the each loop:

$('#mytable > tbody  > tr td:first-child:empty')
        .parent().css('border-top','solid 2px blue');

http://jsfiddle.net/7n20ast0/1/

answered Nov 7, 2014 at 12:55

XCS

28.3k28 gold badges105 silver badges155 bronze badges

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

Comments

Bhushan Kawadkar · Accepted Answer · 2014-11-10 04:54:15Z

2

Try this : iterate first td of each tr and check if text() is empty. If empty then goto tr using parent() and change css.

$('#mytable > tbody  > tr td:first-child').each(function(){  
//check if td having empty text
if ($(this).text().trim() == "")
   {
    //get parent of td and put css
    $(this).parent().css('border-top','solid 2px blue'); 
   }
});

DEMO

edited Nov 10, 2014 at 4:54

answered Nov 7, 2014 at 12:48

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

5 Comments

XCS Over a year ago

I think he wants :first-child, not :first :)

Bhushan Kawadkar Over a year ago

:first-child means first child of parent, see this and :first do the same

XCS Over a year ago

Well, I think he tried to add a border to each tr that has it's first td empty, not only to the first tr. His question is ambigious. Using :first adds only one border, using :first-child adds as many borders as there are empty first tds.

shyamo Over a year ago

your right Cristy, i want to check the first td in the tr, but for all rows

Bhushan Kawadkar Over a year ago

@Cristy and Shyamo, yes you are rigth :first will pick only first td and not the first td of each tr. I have updated my answer, please check. Thanks :)

Pratik Joshi · Accepted Answer · 2014-11-07 12:47:44Z

0

use

if ($firsttd.text() == "")
    $(this).parent().css('border-top','solid 2px blue');

answered Nov 7, 2014 at 12:47

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

Comments

Xandrios93 · Accepted Answer · 2014-11-07 13:40:21Z

0

there is a jquery pseudo selector for empty elements:

$('#mytable > tbody > tr').find('td:first-child:empty').each(function(){  
var $nthis = $(this).parent();

$nthis.css('border-top','solid 2px blue'); 

}); //end of main func

edited Nov 7, 2014 at 13:40

answered Nov 7, 2014 at 12:47

Xandrios93

2,3251 gold badge16 silver badges28 bronze badges

Collectives™ on Stack Overflow

JQuery loop each <td> in <tr>

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related