How to get text of link that inside td in HTML Table using JavaScript?

Question

I have the following structure of row in my table:

<tr class="mattersRow">
    <td></td>
    <td colspan="16">
        <div class="dropdown">
            <a href="#" data-toggle="dropdown">Choose QB</a>
            <ul class="dropdown-menu" aria-labelledby="dLabel" role="menu"> … </ul>
        </div>
    </td>
</tr>

Note: I use bootstrap library

I need to set to every <td> that has text inside "" (empty), or "Choose QB" class='danger'.

This is my jQuery code:

$("#tblMatters .mattersRow td").each(function () {
      if ($(this).html() == "" || $(this).innerHTML == "Choose QB")
      {
           $(this).addClass("danger");
           flag = true;
      }
});

Of course, $(this).html() == "" works great, but how to set "danger" class to the <td> with Choose QB

score 3 · Accepted Answer · 2013-11-15 16:36:03Z

3

You may use :contains()^doc and :empty^doc selectors :

$('#tblMatters .mattersRow')
    .find('td:contains(\'Choose QB\'),td:empty')
    .addClass('danger');

Here is a demo : http://jsfiddle.net/wared/a84CW/.

edited Nov 15, 2013 at 16:36

answered Nov 15, 2013 at 16:14

user1636522

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

Comments

adeneo · Accepted Answer · 2013-11-15 16:31:30Z

3

addClass accepts a function as an argument, and within that function you have access to the currently iterated td element, and can check what it contains :

$("#tblMatters .mattersRow td").addClass(function() {
    var txt = $.trim( $('a', this).text() );

    return txt.length === 0 || txt == 'Choose QB' ? 'danger' : '';
});

If you're only trying to check the text inside the anchor, you should specify that in the question ?

edited Nov 15, 2013 at 16:31

answered Nov 15, 2013 at 16:09

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

adeneo Over a year ago

Do you have other elements inside that TD with content, or in other words, shouldn't you probably just target the anchor only ?

adeneo Over a year ago

@Bryuk - I made an edit to the answer, that should solve any issues.

Tobias · Accepted Answer · 2013-11-15 16:09:37Z

1

Use $(this).text().trim() === 'Choose QB'

answered Nov 15, 2013 at 16:09

Tobias

7,7671 gold badge30 silver badges44 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-15 16:44:52Z

1

Try .closest()

$(this).closest('td').addClass("danger");

Use .filter()

$("#tblMatters .mattersRow td").filter(function () {
    var txt = $.trim($(this).text());
    return txt.length === 0 || txt === 'Choose QB';
}).addClass("danger");

or check text of anchor tag

$("#tblMatters .mattersRow td a").filter(function () {
    var txt = $.trim($(this).text());
    return txt.length === 0 || txt === 'Choose QB';
}).closest('td').addClass("danger");

This should work for both

$("#tblMatters .mattersRow td a").filter(function () {
    var txt = $.trim($(this).text());
    return $(this).closest('td').text().length === 0 || txt === 'Choose QB';
}).closest('td').addClass("danger");

edited Nov 15, 2013 at 16:44

answered Nov 15, 2013 at 16:09

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

7 Comments

Bryuk Over a year ago

This is how to set class, Thanks, but how to find that (this) contains "Choose QB"

Bryuk Over a year ago

Haha. Now Choose QB works, but Empty td doesn't... Of course, I can combine your code and my, but will be great if it will works together...

Bryuk Over a year ago

OK. Summary for right now: 1st - works only for EMPTY 2nd - works only for Choose QB 3rd - doesn't work for anything

Tushar Gupta - curioustushar Over a year ago

@Bryuk i missed a in 3rd one try one more time updated .Than i;m done.

Bryuk Over a year ago

Thanks, wared gave good and simple code=) But your help was good!

|

Collectives™ on Stack Overflow

How to get text of link that inside td in HTML Table using JavaScript?

4 Answers 4

Comments

2 Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related