Javascript ausblenden von bestimmten Zeilen der Tabelle, wenn auf eine Schaltfläche geklickt wird

Möchte ich ausblenden von bestimmten Zeilen in meiner Tabelle, wenn ich auf eine Schaltfläche sowie behalten bestimmte Zeilen. Zum Beispiel klickte ich auf "Show Feuer-basierten champs" - Taste. Es werden nur champs, die haben das Feuer Attribut und verstecken den rest (aus der gleichen Tabelle). Ich klickte eine weitere Schaltfläche mit der Bezeichnung "Show Wasser-basierten champs", dass zeigt nur die champs, die das Wasser Attribut und verstecken den rest etc. und wird werden das gleiche für andere Tasten. Jeder kann einen code dafür? Ich bin nicht erfahren in JS.

Hier ist, wie die Haupt-Tabelle aussieht (nur ein Beispiel, es sind viel mehr Zeilen der Tabelle).

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

  • Hier ist der Link zum jsFiddle... ich habe fertig mit jquery
InformationsquelleAutor Razor's Edge | 2013-02-25
  1. 2

    Verwenden show() und ausblenden()

    Zum Beispiel, wenn "Show Feuer-basierten champs" geklickt, do:

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

    Hier ein jsfiddle, dass alle den code in es

    HTML-code:

    <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>
    • Muss ich replizieren, den gleichen script? zB. codefasfasfs <script type="text/javascript"> function show(Wasser){ $('tbody tr').hide() $('tbody tr:hat(a.'+Wasser+')').show() } </script> <script type="text/javascript"> function show(Feuer){ $('tbody tr').hide() $('tbody tr:hat(a.'+fire+')').show() } </script> code
    • nee, ruft die Funktion der Schaltfläche übernehmen diese.
    • Also ich kopiere einfach den HTML-code da ist? Nicht mehr editieren? EDIT: oh danke! Es funktioniert, wie ich es sein soll! Vielen, vielen Dank!
    • yep. Wenn es funktioniert, drücken Sie die grüne Häkchen, um meine Antwort zu "akzeptieren" es 🙂
    • Warten Sie, es arbeitet auf der fiddle Sache, aber wenn ich es auf den Notizblock, die Tasten nicht funktioniert. Bin ich etwas fehlt?
    • oops, ich vergaß hinzuzufügen, jquery. Ich bin mit jQuery 2, aber Sie können ersetzen, die mit Ihrer gewünschten version. Jetzt ausprobieren 🙂
    • Viel besser! Danke!!! Es funktioniert jetzt.

    InformationsquelleAutor Manishearth
Schreibe einen Kommentar