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

Question

好了，所以我有这个表：

<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"; 

到

但我该如何改变这个功能？我假设类似

document.getElementById("classTable").style.display = "none"; 

但我找不到这方面的任何文档。

Answer 1

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 = '无';作品完美无瑕！

Answer 2

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

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


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