當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
在 JavaScript 中隐藏表格行
生活随笔
收集整理的這篇文章主要介紹了
在 JavaScript 中隐藏表格行
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在 JavaScript 中，我們可以在一個通用的類下定義某些表數據，該類將具有一些可配合的功能。此特定函數將聲明該表的行在選擇性觸發器上的行為方式。
在 JavaScript 中，我們可以在一個通用的?類?下定義某些表數據，該類將具有一些可配合的功能。此特定函數將聲明該表的行在選擇性觸發器上的行為方式。
使用jQuery的 toggle()函數在JavaScript中隱藏表格行
該示例將采用表格行并將它們設置為?display: "none"。當點擊某個?anchor?標簽時，它會將當前階段重新定義為?display: "block"。
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> <table><tr><td>Oranges</td><td>100</td><td><a href="#" class="toggler" data-prod-cat="1">+</a></td></tr><tr class="cat1" style="display:none"><td></td><td>120</td></tr><tr class="cat1" style="display:none"><td></td><td>140</td></tr><tr><td>Apples</td><td>100</td><td><a href="#" class="toggler" data-prod-cat="2">+</a></td></tr><tr class="cat2" style="display:none"><td></td><td>120</td></tr><tr class="cat2" style="display:none"><td></td><td>140</td></tr> </table> $(document).ready(function(){$(".toggler").click(function(e){e.preventDefault();$('.cat'+$(this).attr('data-prod-cat')).toggle();}); });?使用jQuery的 show()和hide()函數在JavaScript中隱藏表格行?
我們將有兩個可點擊的；一個將執行以呈現表行，另一個將縮小行。前面的例子有一個可點擊的來完成顯示和隱藏行的任務。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){$("#hide").click(function(){$(".cat1").hide();});$("#show").click(function(){$(".cat1").show();}); }); </script> </head> <body><table><tr><td>Oranges</td><td>100</td></tr><tr class="cat1" style="display:none"><td></td><td>120</td></tr><tr class="cat1" style="display:none"><td></td><td>140</td></tr></table> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html>總結
以上是生活随笔為你收集整理的在 JavaScript 中隐藏表格行的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python私有属性与私有方法
- 下一篇： javascript实现繁体简体转换