javascript - 隐藏和显示 HTML 表格中的内容

Question

我有一个表格，其中包含大量句子作为单元格中的数据。我给出了以下示例，其中标签 <td> 中的所有数据必须在鼠标单击之前不可见，但现在每次单击我都会隐藏数据并且无法将其恢复。

请找出我的代码中的错误，这样在第一次鼠标单击时它会显示所有数据，而在第二次鼠标单击时它会再次隐藏它。

$(document).ready(function() {
  $("td").click(function() {
    $(this).toggleClass("hidden");
  });
});

.main {
  font-size: 120%;
  color: red;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill blah blah blah blah <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>Smith</td>
    <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>94</td>
  </tr>
</table>

这是代码的链接 https://www.w3schools.com/code/tryit.asp?filename=FUWHD8EBKK6Y

Answer 1

它应该工作，检查；)

$(document).ready(function() {
  $("td").each(function(i, obj) { 
     $(this).toggleClass("hidden");
     $(this).on("click", function(){
        $("td").toggleClass("hidden");
     });
  });
});

.main {
  font-size: 120%;
  color: red;
}

.hidden {
  opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill blah blah blah blah <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>Smith</td>
    <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>94</td>
  </tr>
</table>

如果你只想隐藏表格中的一个单元格，像这样改变内部选择器

     $("td").each(function(i, obj) {
         $(this).on("click", function(){
            $(this).toggleClass("hidden");
         });
      });

最好在 html 中添加“隐藏”类。你可以从js中删除这个

$(this).toggleClass("hidden");

并为 td 元素添加“隐藏”类。