Этот код предназначен для отображения и скрытия таблицы на основе нажатия кнопки, однако, похоже, она не переключает ее должным образом. Кто-нибудь знает, что я делаю неправильно?
<body>
<br>
<button onclick="toggleTable();" style="position:absolute; top:130px; left:1000; width:200px; height:25px">3-D Model</button>
<br>
</body>
<script>
function toggleTable()
{
var status = document.getElementById("modelTable").style.display;
if (status == 'block') {
document.getElementById("modelTable").style.display="none";
} else {
document.getElementById("modelTable").style.display="block";
}
}
<table id="modelTable" border="1" align="right" style="display:block; position:absolute; top:150px; left:1000;">
<tr>
<th>
<a href="google.com"> 3-D Model </a>
</th>
</tr>
<tr>
<td>
<a>test1</a>
</td>
</tr>
<tr>
<td>
<a>test2</a>
</td>
</tr>
</table>
</script>
ваша метка недействительна, вам нужно поместить вкладку в тело
<body>
<br/>
<button onclick="toggleTable();" style="position:absolute; top:130px; left:1000; width:200px; height:25px">3-D Model</button>
<br/>
<table id="modelTable" border="1" align="right" style="display:block; position:absolute; top:150px; left:1000;">
<tr>
<th> <a href="google.com"> 3-D Model </a>
</th>
</tr>
<tr>
<td> <a>test1</a>
</td>
</tr>
<tr>
<td> <a>test2</a>
</td>
</tr>
</table>
<script>
function toggleTable() {
var table = document.getElementById("modelTable");
var status = table.style.display;
if (status == 'block') {
table.style.display = "none";
} else {
table.style.display = "block";
}
}
</script>
</body>
Демо: скрипка
В вашем коде: var status = document.getElementById("modelTable"). Style.display; if (status == 'block') {document.getElementById("modelTable"). style.display = "none"; } else { document.getElementById("modelTable").style.display="block"; } else {document.getElementById("modelTable"). style.display = "block"; } }
Возможно, лучше использовать css:
Css:.hide {display: none; } }
Javascript: document.getElementById('modelTable'). ClassList.toggle('hide');