在 HTML 表格中隱藏和顯示內容
[英]Hiding and showing content in a HTML table
問題描述
我有一個表格，其中包含大量句子作為單元格中的數據。 我給出了以下示例，其中標簽<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
3 個解決方案
解決方案1
1 已采納 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 元素。
解決方案2
0 2018-09-03 09:51:22
問題是因為您正在更改td本身的類，而不是子span 。
要解決此問題，請改用find()和toggle() ，如下所示：
$(document).ready(function() { $("td").click(function() { $(this).find('.hidden').toggle(); }); });
.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>
解決方案3
0 2018-09-03 09:54:41
正如我的評論所提到的，您可以使用.toggle(); 而不是使用隱藏類。 .toggle(); 已經用作顯示/隱藏功能。 然后你可以使用.find(); 隱藏某些元素，而不是隱藏整個元素，這是您在我發表評論后遇到的。 您有一個帶有類的span 元素。 您可以簡單地在各自的 td 元素中選擇該類並對其進行切換。
例子：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("td").click(function(){
$(this).find('.hidden').toggle();
});
});
</script>
<style>
.main {
font-size: 120%;
color: red;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<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>
</body>
</html>
顯示/隱藏HTML表格內的表格行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.