Изменение стиля таблицы HTML из функции javascript?

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>