在tr中隐藏整行

时间:2014-09-23 18:08:49

标签: javascript jquery

我在tr标签内输入值= 0时试图隐藏整行? 在示例中,我试图隐藏行1,3,4并显示第2行,因为input = 1

的值

现在我隐藏了所有关于类隐藏的内容 - 这也不是我想要完成的事情。

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>

2 个答案:

答案 0 :(得分:1)

在DOM中搜索包含值{0}的输入的tr

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

答案 1 :(得分:1)

试试这个:

  $(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();
  });
});