我有一个表格,其中包含大量句子作为单元格中的数据。我给出了以下示例,其中标签 <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
最佳答案
它应该工作,检查;)
$(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 元素添加“隐藏”类。
关于javascript - 隐藏和显示 HTML 表格中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52147062/