Javascript在单击按钮时隐藏某些表行
Javascript在单击按钮时隐藏某些表行
提问于 2013-02-25 15:18:39
我想在单击按钮时隐藏表格中的某些行，同时保留某些行。例如，我点击了"Show Fire-based champs“按钮。它将只显示具有Fire属性的冠军，并将隐藏其余的(来自同一个表)。我点击了另一个名为“显示基于水的冠军”的按钮，它将只显示具有水属性的冠军，并将隐藏其余的属性等，并将相同的其他按钮。任何人都可以为它编写代码吗？我没有JS的经验。
下面是主表的外观(这只是一个示例，表行要多得多)。
<table border="1" width="800">
<thead><tr>
<th>Hero</th>
<th>Class</th>
<th>Offensive Skill</th>
<th>Passive Skill</th>
<th>Ultimate</th>
</tr></thead>
<tbody>
<tr><td><a class="holy">Arcana</a></td>
<td>the Arcane Manipulator</td>
<td> - </td>
<td> - </td>
<td>Arcane Destroyer</td></tr>
<tr><td><a class="fire">Azakiel</a></td>
<td>the Blood Mage</td>
<td> - </td>
<td>Elf Blood</td>
<td>Call of the Phoenix</td></tr>
<tr><td><a class="wind">Bahamut</a></td>
<td>the King of the Skies</td>
<td> - </td>
<td> - </td>
<td>Mega Flare</td></tr>
<tr><td><a class="dark">Carinblack</a></td>
<td>the Dark Assailant</td>
<td>Sword Bash</td>
<td> - </td>
<td>Blade of the Dark</td></tr>
<tr><td><a class="earth">Dran</a></td>
<td>the Steel Beast</td>
<td>Rushing Tackle</td>
<td> - </td>
<td>Rolling Thunder</td></tr>
<tr><td><a class="water">Fenrir</a></td>
<td>the Water Emperor</td>
<td>Water Barrage</td>
<td> - </td>
<td>Waterfall</td></tr>
<tr><td><a class="thunder">Larza</a></td>
<td>the Lightning Heroine</td>
<td>Staff of Lightning</td>
<td> - </td>
<td>Storm Surge</td></tr>
<tr><td><a class="thunder">Razor</a></td>
<td>the Thunder Emperor</td>
<td>Thunder Strike</td>
<td> - </td>
<td>Thunderstorm</td></tr>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-02-25 15:22:04
使用show()和hide()
例如，当点击"Show fire-based champs“时，执行以下操作：
$('tbody tr').hide() //Hide all rows
$('tbody tr:has(a.fire)').show() //Show all fire rowsHere is a jsfiddle that has all the code in it
HTML代码：
<html><head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0b1.js"></script>
<script type="text/javascript">
function show(champ){
$('tbody tr').hide()
$('tbody tr:has(a.'+champ+')').show()
}
</script>
</head>
<body>
<table border="1" width="800">
<thead><tr>
<th>Hero</th>
<th>Class</th>
<th>Offensive Skill</th>
<th>Passive Skill</th>
<th>Ultimate</th>
</tr></thead>
<tbody>
<tr><td><a class="holy">Arcana</a></td>
<td>the Arcane Manipulator</td>
<td> - </td>
<td> - </td>
<td>Arcane Destroyer</td></tr>
<tr><td><a class="fire">Azakiel</a></td>
<td>the Blood Mage</td>
<td> - </td>
<td>Elf Blood</td>
<td>Call of the Phoenix</td></tr>
<tr><td><a class="wind">Bahamut</a></td>
<td>the King of the Skies</td>
<td> - </td>
<td> - </td>
<td>Mega Flare</td></tr>
<tr><td><a class="dark">Carinblack</a></td>
<td>the Dark Assailant</td>
<td>Sword Bash</td>
<td> - </td>
<td>Blade of the Dark</td></tr>
<tr><td><a class="earth">Dran</a></td>
<td>the Steel Beast</td>
<td>Rushing Tackle</td>
<td> - </td>
<td>Rolling Thunder</td></tr>
<tr><td><a class="water">Fenrir</a></td>
<td>the Water Emperor</td>
<td>Water Barrage</td>
<td> - </td>
<td>Waterfall</td></tr>
<tr><td><a class="thunder">Larza</a></td>
<td>the Lightning Heroine</td>
<td>Staff of Lightning</td>
<td> - </td>
<td>Storm Surge</td></tr>
<tr><td><a class="thunder">Razor</a></td>
<td>the Thunder Emperor</td>
<td>Thunder Strike</td>
<td> - </td>
<td>Thunderstorm</td></tr>
</tbody>
</table>
<button onclick="show("fire")">Show fire</button>
<button onclick="show("water")">Show water</button>
<button onclick="show("thunder")">Show thunder</button>
<button onclick="show("dark")">Show dark</button>
<button onclick="show("earth")">Show earth</button>
<button onclick="show("holy")">Show holy</button>
<button onclick="show("wind")">Show wind</button>
<button onclick="$('tbody tr').show() ">Show all</button>
</body></html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15061891
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号