单击按钮时，Javascript隐藏某些表格行

当我单击按钮并保留某些行时，我想隐藏表格中的某些行。例如，我点击了“Show Fire-champs”按钮。它只会显示拥有Fire属性的冠军，并会隐藏其余（来自同一张表）。我点击了另一个名为“Show Water-based champs”的按钮，它只显示拥有水属性的冠军，并且会隐藏其他等等，并且对于其他按钮也是如此。任何人都可以为它做一个代码？我没有经验的JS。单击按钮时，Javascript隐藏某些表格行

下面是主表的样子（只是一个示例，有更多的表行）。

<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>

来源

2013-02-25 Razor' s Edge

这里是的jsfiddle的链接...我已经使用jQuery – 2013-02-25 07:35:19

使用show()和hide()

例如，当 “显示火系冠军” 被点击，这样做：

$('tbody tr').hide() //Hide all rows 
$('tbody tr:has(a.fire)').show() //Show all fire rows

Here 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(&quot;fire&quot;)">Show fire</button> 
<button onclick="show(&quot;water&quot;)">Show water</button> 
<button onclick="show(&quot;thunder&quot;)">Show thunder</button> 
<button onclick="show(&quot;dark&quot;)">Show dark</button> 
<button onclick="show(&quot;earth&quot;)">Show earth</button> 
<button onclick="show(&quot;holy&quot;)">Show holy</button> 
<button onclick="show(&quot;wind&quot;)">Show wind</button> 
<button onclick="$('tbody tr').show() ">Show all</button> 
</body></html>

来源

2013-02-25 07:22:03 Manishearth

做我需要复制相同的脚本？例如。 'code'fasfasfs <脚本类型= “文本/ JavaScript的”> 功能显示（水）{ $（ 'TBODY TR'）隐藏（） $（ 'TBODY TR：具有（a' +水+ '）'）。显示（） } <脚本类型= “文本/ JavaScript的”> 功能显示（火）{ $（ 'TBODY TR'）。隐藏（） $（ 'tbody tr：has（a。'+ fire +'）'）。show（） } ''代码' – 2013-02-25 15:09:49

@ Ralphx3589：不需要，按钮中的函数会调用此功能。 – Manishearth 2013-02-25 15:11:31

那么，我只是复制HTML代码？没有更多的编辑？编辑：哦，谢谢！它按照我的意图工作！非常感谢！ – 2013-02-25 15:12:39

单击按钮时，Javascript隐藏某些表格行

回答

相关问题