使用 javascript 切換 CSS 隱藏表格行

Question

我在內聯 css 樣式中定義了以下內容：

    tr.submission { display: none; }
    tr.submission.can_submit { display: table-row; }
    tr.submission.graded { display: table-row; }
    tr.submission.comments { display: table-row; }

腳本生成帶有內聯的 HTML 文件，並使用表行可見性標記某些行以顯示它們。 我想在我的頁面上包含一個鏈接，以便單擊它可以隨意打開和關閉 tr.submission 顯示，就像我可以使用瀏覽器開發工具所做的那樣。

我不是一個 JS 人，所以尋找最直接的方法，不需要我大量修改上述格式。

Answer 1

您應該考慮使用 JavaScript 並使用 JQuery 來更輕松地調用

1. 將帶有 CDN 的 JQuery 導入到您的代碼中，如下您的 body 標簽下方

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

2. 將此代碼復制到 JQuery 下方

<script> $('.button').on('click', function () { $("tr.submission").toggle() }); </script>

.button引用您的鏈接，單擊它會切換tr.submission display 。 它就像 CSS 所以如果你的鏈接有一個id="button"就用#button調用它