Question

我有这张桌子：

external/sepolicy

我想用一个调用函数的按钮来控制这个表的可见性，所以我想我需要使用

<table id="classTable" style="width:40%">
<tr>
    <td>WCOB 2053: Business Foundations</td>
    <td>MWF 10:45am</td>
</tr>
<tr>
    <td>MATH 2043C: Survey of Calculus</td>
    <td>MW 12:55pm</td>
</tr>
<tr>
    <td>ISYS 2103: Business Information Systems</td>
    <td>MW 4:30pm</td>
</tr>
<tr>
    <td>ISYS 2263: Principles of Information Systems</td>
    <td>TTh 9:30am</td>
</tr>
<tr>
    <td>CSCE 3193: Programming Paradigms</td>
    <td>TTh 11:00am</td>
</tr>
<tr>
    <td>SCMT 2103: Introduction to Supply Chain Management</td>
    <td>TTh 6:00pm</td>
</tr>

但如何在功能中更改此功能？我假设

之类的东西

style="display:none";

但我无法在任何地方找到相关文档。

Answer 1

你可以在你的按钮上做这样的事情：

<button onclick="myFunction()">Click me</button>


<script>
function myFunction() {
    document.getElementById("classTable").style.display = "none";
}
</script>

Answer 2

var show = true;
var table = document.getElementById('classTable');
var toggleTable = function()
{
    table.style.display = show ? 'none' : 'block';
    show = !show;
}

<table id="classTable" style="width:40%">
<tr>
    <td>WCOB 2053: Business Foundations</td>
    <td>MWF 10:45am</td>
</tr>
<tr>
    <td>MATH 2043C: Survey of Calculus</td>
    <td>MW 12:55pm</td>
</tr>
<tr>
    <td>ISYS 2103: Business Information Systems</td>
    <td>MW 4:30pm</td>
</tr>
<tr>
    <td>ISYS 2263: Principles of Information Systems</td>
    <td>TTh 9:30am</td>
</tr>
<tr>
    <td>CSCE 3193: Programming Paradigms</td>
    <td>TTh 11:00am</td>
</tr>
<tr>
    <td>SCMT 2103: Introduction to Supply Chain Management</td>
    <td>TTh 6:00pm</td>
</tr>
</table>

<button onclick="toggleTable()">Toggle table</button>

table.style.display ='none';效果很好！

从Javascript函数更改HTML表格样式？

2 个答案: