Javascript - 顯示隱藏表格行

我是Javascript的新用戶，需要一些幫助。我有一個有4行的表（3個顯示，1個顯示=「無」）。我想要做的是通過點擊鏈接顯示第四行。下面是我的HTML看起來像：Javascript - 顯示隱藏表格行

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

下面是我的javascript：

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

鏈接的jsfiddle： https://jsfiddle.net/99600cha/

我試着做的JavaScript功能，沒有幾個不同的方法成功。有人能告訴我我做錯了什麼嗎？

我真正想要做的是有隱藏的和可擴展的中間行顯示的第一個和最後一個行，像這樣：

第1章

（點擊查看所有章節）

第10章

所以，如果任何人都可以指向我類似的東西，請做！

編輯：這是顯示我試圖完成的確切效果的鏈接：https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting

來源

2017-02-20 Lost_in_C_space

如果您正在使用jQuery：

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

來源

2017-02-20 18:52:04

在var thisRow = document.getElementsByClassName('hiddenRow');thisRow返回那個元素的數組這樣的類，你必須使用thisRow[0]來選擇第一個元素。

然而，更優雅，更簡潔的方案將作出這樣的佈局：

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

通過這種簡單的CSS規則，你將能夠通過改變單個類可以隱藏所有的元素：

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

要顯示隱藏的教訓，使用此行： document.getElementById("lessons").classList.add("full") 要恢復，使用該行：document.getElementById("lessons").classList.remove("full")

來源

2017-02-20 19:00:48

感謝您的回覆！就像我說的，我對HTML，CSS，Javascript非常陌生。你能否給我提供一個關於如何做到這一點的更多細節的鏈接？或者可能是一個工作示例？我要去的確切效果是這樣的：[章列表]（https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting） –

只爲你https://jsfiddle.net/99600cha/35/ –

謝謝！正是我要去的！ –

Javascript - 顯示隱藏表格行

回答

相關問題