使用jquery，我如何隱藏所有未檢查的錶行？

我有一列複選框的html表格。我有一個按鈕（也稱「只顯示所選行」，並點擊按鈕我想隱藏其中該行中的複選框未選中使用jquery，我如何隱藏所有未檢查的錶行？

這裏所有行是我的HTML的例子：

<button id="mybutton">Show only Selected Rows</button> 

<table> 
     <tr> 
      <td>test</td> 
      <td><input class="test" type=checkbox value=100></td> 
      <td><input class="test2" type=checkbox value=222></td> 
     </tr> 
     <tr> 
      <td>test</td> 
      <td><input class="test" type=checkbox value=100></td> 
      <td><input class="test2" type=checkbox value=222></td> 
     </tr> 
</table>

我想把它動態地看一列（不硬編碼），這樣我就可以說：「根據第2列或第3列等）

來源

2015-01-21 leora

我認爲你正在尋找這個......

$('#mybutton').click(function(){ 
 
$('table tr td:first-child :checkbox:not(:checked)').closest('tr').hide(); 
 
});

* {margin: 0px; padding: 0px;} 
 
body {background-color: rgb(248,248,248)} 
 
#nav { 
 
    list-style:none; 
 
} 
 
#nav li { 
 
    float:left; 
 
    display:block; 
 
    width:100px; 
 
    position:relative; 
 
    z-index:500; 
 
} 
 
/* this is the parent menu */ 
 
#nav li a { 
 
    display:block; 
 
    padding:15px; 
 
    color:#000; 
 
    border: 1px solid transparent; 
 
} 
 
#nav li a:hover { 
 
    border: 1px solid black; 
 
    
 
} 
 
#nav a.open { 
 
    color:#fff; 
 
    background-color: pink; 
 
} 
 
#nav ul { 
 
    position:absolute; 
 
    display:none; 
 
    padding:0; 
 
    list-style:none; 
 
} 
 
#nav ul li { 
 
    width:100px; 
 
    float:left; 
 
} 
 
#nav ul a { 
 
    display:block; 
 
    height:15px; 
 
    padding: 15px; 
 
    color:#666; 
 
} 
 
#nav ul a:hover { 
 
    text-decoration:underline; 
 
} 
 
.active{ 
 
    background-color: pink; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="mybutton">Show only Selected Rows</button> 
 
<table> 
 
     <tr> 
 
      <td><input class="test" type=checkbox checked value=100></td> 
 
      <td><input class="test2" type=checkbox checked value=222></td> 
 
     </tr> 
 
     <tr> 
 
      <td><input class="test" type=checkbox value=100></td> 
 
      <td><input class="test2" type=checkbox checked value=222></td> 
 
     </tr> 
 
</table>

來源

2015-01-21 05:44:09 Dhaval

使用選擇:checkbox:not(:checked)目標與.closest('tr')沿所有選中的複選框來獲得過濾器他們的父母tr：

$('table td:first-child :checkbox:not(:checked)').closest('tr').hide();

Working Demo

來源

2015-01-21 05:09:48

我意識到我有其他複選框在表格中我怎麼可能範圍這檢查到表中的單個列？ – leora 2015-01-21 05:13:27

你是指第一行中的第一列還是第一行中的所有複選框？ – 2015-01-21 05:14:20

我在每個單元格中都有一個複選框，我想讓過濾邏輯只查看這一列，以確定是否過濾 – leora 2015-01-21 05:17:42

使用jquery，我如何隱藏所有未檢查的錶行？

回答

相關問題