顯示/隱藏Javascript中的多個表列
[英]Show/Hide Multiple Table Columns in Javascript
問題描述
我需要使用復選框在HTML表中僅使用CSS或javascript顯示/隱藏多個相關列。 例如，如果選中“啤酒”復選框，則我需要顯示與Beer相關的所有三列，如果未選中，則隱藏所有三列。
<html>
Show: <input type="checkbox">Beer</input>
<input type="checkbox">Wine</input>
<input type="checkbox">Vodka</input>
<input type="checkbox">Whiskey</input>
<table>
<tr>
<th>BeerCol1</th>
<th>BeerCol2</th>
<th>BeerCol3</th>
<th>WineCol1</th>
<th>WineCol2</th>
<th>WineCol3</th>
<th>VodkaCol1</th>
<th>VodkaCol2</th>
<th>VodcaCol3</th>
<th>WhiskeyCol1</th>
<th>WhiskeyCol2</th>
<th>WhiskeyCol3</th>
</tr>
<tr>
<td>Beer Value 1</td>
<td>Beer Value 2</td>
<td>Beer Value 3</td>
<td>Wine Value 1</td>
<td>Wine Value 2</td>
<td>Wine Value 3</td>
<td>Vodka Value 1</td>
<td>Vodka Value 2</td>
<td>Vodka Value 3</td>
<td>Whiskey Value 1</td>
<td>Whiskey Value 2</td>
<td>Whiskey Value 3</td>
</tr>
<tr>
<td>Beer Value 4</td>
<td>Beer Value 5</td>
<td>Beer Value 6</td>
<td>Wine Value 4</td>
<td>Wine Value 5</td>
<td>Wine Value 6</td>
<td>Vodka Value 4</td>
<td>Vodka Value 5</td>
<td>Vodka Value 6</td>
<td>Whiskey Value 4</td>
<td>Whiskey Value 5</td>
<td>Whiskey Value 6</td>
</tr>
</table>
</html>
2 個解決方案
解決方案1
0 已采納 2018-02-24 17:58:49
如果可以添加屬性，請嘗試以下操作：
#beer:checked ~ table .beer, #whiskey:checked ~ table .whiskey, #wine:checked ~ table .wine, #vodka:checked ~ table .vodka { visibility: visible; } th, td { visibility: hidden; }
Show: <input id="beer" name="beer" type="checkbox"/> <label for="beer">Beer</label> <input id="wine" name="wine" type="checkbox"/> <label for="wine">Wine</label> <input id="vodka" name="vodka" type="checkbox"/> <label for="vodka">Vodka</label> <input id="whiskey" name="whiskey" type="checkbox"/> <label for="whiskey">Whiskey</label> <table> <tr> <th class="beer">BeerCol1</th> <th class="beer">BeerCol2</th> <th class="beer">BeerCol3</th> <th class="wine">WineCol1</th> <th class="wine">WineCol2</th> <th class="wine">WineCol3</th> <th class="vodka">VodkaCol1</th> <th class="vodka">VodkaCol2</th> <th class="vodka">VodcaCol3</th> <th class="whiskey">WhiskeyCol1</th> <th class="whiskey">WhiskeyCol2</th> <th class="whiskey">WhiskeyCol3</th> </tr> <tr> <td class="beer">Beer Value 1</td> <td class="beer">Beer Value 2</td> <td class="beer">Beer Value 3</td> <td class="wine">Wine Value 1</td> <td class="wine">Wine Value 2</td> <td class="wine">Wine Value 3</td> <td class="vodka">Vodka Value 1</td> <td class="vodka">Vodka Value 2</td> <td class="vodka">Vodka Value 3</td> <td class="whiskey">Whiskey Value 1</td> <td class="whiskey">Whiskey Value 2</td> <td class="whiskey">Whiskey Value 3</td> </tr> <tr> <td class="beer">Beer Value 4</td> <td class="beer">Beer Value 5</td> <td class="beer">Beer Value 6</td> <td class="wine">Wine Value 4</td> <td class="wine">Wine Value 5</td> <td class="wine">Wine Value 6</td> <td class="vodka">Vodka Value 4</td> <td class="vodka">Vodka Value 5</td> <td class="vodka">Vodka Value 6</td> <td class="wine">Whiskey Value 4</td> <td class="wine">Whiskey Value 5</td> <td class="wine">Whiskey Value 6</td> </tr> </table>
解決方案2
0 2018-02-25 08:52:52
這是jQuery的一個簡單解決方案，我從0開始索引每個復選框，
$(document).ready(function(){ $('input').on('change',function(){ var id = $(this).data('id') if ($(this).prop('checked')) $('table tr').each(function(i,v){ $(v).find('td').eq(id).show(); $(v).find('th').eq(id).show(); }) else $('table tr').each(function(i,v){ $(v).find('td').eq(id).hide(); $(v).find('th').eq(id).hide(); }) }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="check1" type="checkbox" data-id="0" checked> <label for="check1">Beer</label> <input id="check2" type="checkbox" data-id="1" checked> <label for="check2">Wine</label> <input id="check3" type="checkbox" data-id="2" checked> <label for="check3">Vodka</label> <table> <tr> <th>Beer</th> <th>Wine</th> <th>Vodka</th> </tr> <tr> <td>20</td> <td>12</td> <td>22</td> </tr> <tr> <td>32</td> <td>33</td> <td>34</td> </tr> </table>
Javascript中的表格-隱藏/顯示列
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.