Question

我是Javascript的新手，需要一些帮助。我有一个4行的表（显示3行，1个显示=＆＃34;无＆＃34;）。我想要做的是通过点击链接显示第4行。这是我的HTML的样子：

<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

Answer 1

如果你正在使用jquery：

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

Answer 2

在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")

Javascript - 显示隐藏的表格行

2 个答案: