文章/答案/技术大牛

发布

社区首页 >问答首页 >隐藏和显示HTML表中的内容

问隐藏和显示HTML表中的内容
EN

Stack Overflow用户

提问于 2018-09-03 09:38:57

回答 3查看 70关注 0票数 1

我有一张表格里有巨大的句子作为数据在牢房里。我给出了下面的示例，在鼠标单击之前，标记<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的链接

javascript

jquery

Stack Overflow用户

回答已采纳

发布于 2018-09-03 09:58:47

它应该有效，检查；)

$(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元素中添加“隐藏”类。

票数 1

查看全部 3 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52147062

复制

相似问题

问隐藏和显示HTML表中的内容
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏和显示HTML表中的内容EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏和显示HTML表中的内容
EN