Javascript - versteckte Zeile zeigen

Question

Ich bin neu in Javascript und brauche etwas Hilfe. Ich habe eine Tabelle mit 4 Zeilen (3 angezeigt, und 1 Anzeige = "keine"). Was ich versuche, ist die vierte Zeile anzuzeigen, indem ich auf einen Link klicke. Hier ist, was meine HTML aussieht:

<table class="lessons"> 
    <tr> 
    <td class="chapter">01</td> 
    <td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3> 
     <h3 class="desc">Program description....blah blah blah...</h3> 
    </tr> 
    <tr> 
    <td class="chapter">02</td> 
    <td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3> 
     <h3 class="desc">Description for chapter 2....blah blah...blah...</h3> 
    </tr> 
    <tr> 
    <td class="chapter">03</td> 
    <td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3> 
     <h3 class="desc">Description for chapter 3...blah blah blah....</h3> 
    </tr> 
    <tr class="hiddenRow" style="display:none;"> 
    <td class="chapter">04</td> 
    <td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3> 
     <h3 class="desc">Chapter four description....blah blah...</h3> 
    </tr> 

</table> 
<a href="javascript:showRows();">show hidden</a> 

Und hier ist mein javascript:

function showRows(){ 
var thisRow = document.getElementsByClassName('hiddenRow'); 
    thisRow.style.display=""; 
} 

Link zu JSFiddle: https://jsfiddle.net/99600cha/

Ich habe versucht, die JavaScript-Funktion ein paar verschiedene Möglichkeiten, um mit nicht tun Erfolg. Könnte mir jemand zeigen, was ich falsch mache?

Was ich wirklich tun möchten, ist die erste und letzte Zeilen mit den mittleren Reihen versteckt und erweiterbar angezeigt haben, wie folgt aus:

Kapitel 1

(klicken, um alle Kapitel zu sehen)

Kapitel 10

also wenn jemand mich auf etwas ähnliches hinweisen kann, bitte tun!

Edit: Hier ist ein Link, der die genaue Wirkung zeigt ich versuche zu erreichen: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting

Answer 1

wenn Ihr jquery verwenden:

function showRows(){ 
$('.hiddenRow').hide(); 
} 

Answer 2

In var thisRow = document.getElementsByClassName('hiddenRow');thisRow gibt ein Array von Elementen, die haben Für diese Klasse müssen Sie thisRow[0] verwenden, um ein erstes Element auszuwählen.

jedoch eine elegantere und sauberere Lösung wäre dieses Layout werden machen:

<div class="lessons" id="lessons"> 
    <div class="lesson"> 
     <div class="chapter">01</div> 
     <div class="title">...</div> 
     <div class="whatever">...</div> 
     <div class="whatever">...</div> 
    </div> 
    <div class="lesson"> 
     <div class="chapter">01</div> 
     <div class="title">...</div> 
     <div class="whatever">...</div> 
     <div class="whatever">...</div> 
    </div> 
    <div class="lesson-hidden"> 
     <div class="chapter">A hidden lesson.</div> 
     <div class="title">...</div> 
     <div class="whatever">...</div> 
     <div class="whatever">...</div> 
    </div> 
</div> 

Durch diese einfache CSS-Regel mit können Sie alle Elemente verstecken, indem eine einzige Klasse zu ändern:

.lessons .lesson-hidden { display: none; } 
.lessons.full .lesson-hidden { display: block; } 

versteckte Unterricht zeigen, verwenden Sie die folgende Zeile: document.getElementById("lessons").classList.add("full") zurückkehren möchten, verwenden Sie die folgende Zeile: document.getElementById("lessons").classList.remove("full")