使用javascript切换CSS隐藏表格行

问题描述

我以内联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专家，因此正在寻找最简单的方法，不需要我对上述格式进行大量修改。

解决方法

您应该考虑使用JavaScript并使用JQuery来简化调用

将带有CDN的JQuery导入到您的代码中，位于您的body标签下方

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

将此代码复制到JQuery下面

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

对链接的.button引用是单击该链接将切换tr.submission display。就像CSS一样，如果您的链接中有#button

，请用id="button"来调用它

css-tables javascript