How to hide tr items when td is 0 in jquery?

Question

I want to hide all of the <tr> where td's text is 0. How can I do that? I have to mention that in reality i have more than 600 rows. But the example below is a demo. THX

<table id ="list2">
       <tbody>
            <tr>
                <td>2</td>
                <td>213</td>
                <td id ="hideRow">0</td>
            <tr>
            <tr>
                <td>vb</td>
                <td>asf</td>
                <td id ="hideRow">0</td>
            <tr>
            <tr>
                <td>cxvb</td>
                <td>xcvb</td>
                <td id ="hideRow">2</td>
            <tr>
            <tr>
                <td>cas</td>
                <td>asdf</td>
                <td id ="hideRow">45</td>
            <tr>
       </tbody>
    </table>

This is my try :| . The event is loaded by onclick event

$('#list2').find("tr td #hideRow").each(function(){
        var txt2 = $(this).text();
        if (txt2 =="0"){
            $('#list2').find("tr").each(function(){
                $(this).hide();
            });
        }
})

enter image description here

possible duplicate of [jquery find element by text](http://stackoverflow.com/questions/7321896/jquery-find-element-by-text) — Blazemonger, Feb 12 '14 at 13:46
`id` is unique , you cannot have same id for more than one `td` instead use `class` — Navin, Feb 12 '14 at 13:49

score 3 · Answer 1 · answered Feb 12 '14 at 14:12

First of all do not use id for duplicate names. Try doing it like following.

<table id ="list2">
   <tbody>
        <tr>
            <td>2</td>
            <td>213</td>
            <td class="hideRow">0</td>
        <tr>
        <tr>
            <td>vb</td>
            <td>asf</td>
            <td class="hideRow">0</td>
        <tr>
        <tr>
            <td>cxvb</td>
            <td>xcvb</td>
            <td class="hideRow">2</td>
        <tr>
        <tr>
            <td>cas</td>
            <td>asdf</td>
            <td class="hideRow">45</td>
        <tr>
   </tbody>
</table>


$('#list2').find(".hideRow").each(function(){
        var txt2 = $(this).text();
        if (txt2 =="0"){
            $(this).parent().hide();
        }
})

I changed this line of code $(this).parent().hide(); into this $(this).closest('tr').hide(); => and its works. But question, which method is faster? this one or @Anthony Grist's one ? :D — Attila Naghi, Feb 12 '14 at 14:18

Anthony Grist · Accepted Answer · 2014-02-12T14:08:57.637

2

IDs on elements need to be unique, you can't have multiple <td id="hideRow"> elements and expect things to play nicely all of the time. I'd suggest changing it to a class. Then, select all elements:

var elems = $('span.hideRow');

Filter to those whose text is 0:

elems = elems.filter(function() {
    return $(this).text() === "0";
});

Get their parent <tr> element:

elems = elems.closest('tr');

Then, finally, hide them:

elems.hide();

That can, obviously, all be done in one line:

$('span.hideRow').filter(function() {return $(this).text() === "0";}).closest('tr').hide();

edited Feb 12 '14 at 14:08

answered Feb 12 '14 at 13:47

Anthony Grist

38,173
8
62
76

thx for helping me out. But your code hides all of the tds where its text value is 0, but I want to hide all of the TRs where one of the child(TD) is 0 – Attila Naghi Feb 12 '14 at 13:54
I dont know if you understand me :D . Im sure that im not the master of explaining something – Attila Naghi Feb 12 '14 at 13:56
@Chester Missed a step, added that in now. – Anthony Grist Feb 12 '14 at 13:56
I don't understand. what did i miss ? – Attila Naghi Feb 12 '14 at 13:58
its not working, maybe I didnt explain the path rightly. I edited my post with an image. I hope it will help.If you ctrl + scroll it, you can zoom it . Thx – Attila Naghi Feb 12 '14 at 14:07
@Chester You didn't miss anything. I missed the step that goes from the `` elements to their containing `` element, which I edited my answer to add. – Anthony Grist Feb 12 '14 at 14:07
@Chester That's because your actual HTML is different from the one you posted in the question; I've updated the answer again to reflect that. – Anthony Grist Feb 12 '14 at 14:09
It works. Thank YOU !!! but I have two question: 1: Why did you change the .parent into .closest ? 2: Why did you use "===" operator ? – Attila Naghi Feb 12 '14 at 14:13
@Chester The `.parent()` function only goes up a single level, so from the `` the parent is the ``, not the `` that you actually wanted; `.closest()` goes up as many levels as it needs until it finds the first element that matches the selector. The `=== `operator is strict equality, it checks that both the type of the operands and their values are equal (I didn't *need* to use it, `==` would have worked as well). So while `1 == "1"` is true, `1 === "1"` is not, because the left side is a number and the right side is a string. – Anthony Grist Feb 12 '14 at 14:17

How to hide tr items when td is 0 in jquery?

2 Answers2