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 - 显示隐藏表格行

回答

相关问题