user3906056
user3906056

Reputation: 313

Hide entire row in tr

I'm trying to hide an entire row when there is input value = 0 inside the tr tag? In the example I'm trying to hide row 1,3,4 and display row 2 since the value of input = 1

Right now I'm hiding all tr's with the class hide-also and that is not what i want to accomplished.

http://jsfiddle.net/jmg2u98a/1/

<script>
$(document).ready(function () {
$(".btn1").click(function () {
    $('td:has(input[value=0]), .hide-also').hide();
});
$(".btn2").click(function () {
    $('td:has(input[value=0]), .hide-also').show();
});
});
</script>
    <table>
    <tr class="hide-also">
        <td>Row 1 Hide if value 0</td>
        <td><input type="radio" name="hideifvalue0" value="0"/></td>
    </tr>
    <tr class="hide-also">
        <td>Row 2 Show if value 1</td>
        <td><input type="radio" name="hideifvalue0" value="1"/></td>
    </tr>
    <tr class="hide-also">
        <td>Row 3 Hide if value 0</td>
        <td><input type="radio" name="hideifvalue0" value="0"/></td>
    </tr>
    <tr class="hide-also">
        <td>Row 4 Hide if value 0</td>
        <td><input type="radio" name="hideifvalue0" value="0"/></td>
    </tr>        
</table>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>

Upvotes: 0

Views: 114

Answers (2)

Naveen Chandra Tiwari
Naveen Chandra Tiwari

Reputation: 5123

Try this:

  $(document).ready(function () {
   $(".btn1").click(function () {
    $(".hide-also").each(function(){
        if($(this).find("td input").val()==0)
            $(this).hide();
    });

  });
  $(".btn2").click(function () {
    $('td:has(input[value=0]), .hide-also').show();
  });
});

Upvotes: 1

Barmar
Barmar

Reputation: 780842

Search up the DOM for the containing tr of the inputs with value=0.

$(".btn1").click(function () {
    $("input[value=0]").closest("tr.hide-also").hide()
});
$(".btn2").click(function () {
    $("input[value=0]").closest("tr.hide-also").show()
});

Upvotes: 1

Related Questions