Heim > Artikel > Web-Frontend > So verbergen Sie die Tabelle in Javascript
So verbergen Sie die Tabelle in Javascript
- 藏色散人Original
- 2021-04-27 10:11:354484Durchsuche
So verbergen Sie eine Tabelle in JavaScript: Erstellen Sie zunächst eine HTML-Beispieldatei. Erstellen Sie dann eine Tabelle im Hauptteil und verbergen Sie sie schließlich mithilfe des js-Codes „getElementById(„table1“).style.display=‘block‘;“ .
Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Javascript zeigt eine Tabelle an und verbirgt sie
Hier werden hauptsächlich die Methode document.getElementById("Element ID") und das Attribut style.display des Elements verwendet. Der Dateiname lautet doHide.htm und der Code lautet wie folgt:
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<script language="javascript">
function DoHide()
{
// 获得id为table1的表格，并判断它的style.display值是否等于 'block '
// 等于就执行 if 部分代码，不等于就执行 else 部分代码
if(document.getElementById("table1").style.display=='block')
{
// 把 id 为 table1的元素的设置为隐藏
document.getElementById("table1").style.display='none';
// 把按钮（id 为 B3 ）的文字设置成 '显示表格'
document.getElementById("B3").value="显示表格";
}
else
{
// 把 id 为 table1的元素的设置为显示
document.getElementById("table1").style.display='block';
// 把按钮（id 为 B3 ）的文字设置成 '隐藏表格'
document.getElementById("B3").value="隐藏表格";
}
}
</script>
</head>
<body>
<p><input type="button" value="隐藏表格" name="B3" onclick="DoHide();"></p>
<table border="1" width="100%" id="table1" style="display:block">
<tr>
<td>这是一个表格</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]
Das obige ist der detaillierte Inhalt vonSo verbergen Sie die Tabelle in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!