1

当我单击按钮并保留某些行时，我想隐藏表格中的某些行。例如，我单击了“显示基于火焰的冠军”按钮。它只会显示具有火属性的英雄，并将隐藏其余的（来自同一张表）。我单击了另一个名为“显示基于水的英雄”的按钮，该按钮将仅显示具有水属性的英雄并隐藏其余的等，并且对于其他按钮也是相同的。任何人都可以为它制作代码吗？我对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>



4

1 回答 1

2

使用show()和hide()

例如，当单击“显示基于火焰的英雄”时，请执行以下操作：

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

这是一个包含所有代码的jsfiddle

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-25T07:22:03.583 回答