Comment masquer le tableau en javascript-js tutoriel-php.cn

Comment masquer le tableau en javascript

藏色散人

Libérer： 2023-01-05 16:11:45

original

4446 Les gens l'ont consulté

Comment masquer un tableau en JavaScript : créez d'abord un exemple de fichier HTML ; puis créez un tableau dans le corps ; et enfin implémentez-le via le code js "getElementById("table1").style.display=' block';" Cachez-le simplement.

Comment masquer le tableau en javascript

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

Javascript affiche et masque un tableau

La méthode document.getElementById("Element ID") et l'attribut style.display de l'élément sont principalement utilisés ici. Le nom du fichier est doHide.htm, et le code est le suivant :

<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值是否等于 &#39;block &#39;
// 等于就执行 if 部分代码，不等于就执行 else 部分代码
if(document.getElementById("table1").style.display==&#39;block&#39;)
{
// 把 id 为 table1的元素的设置为隐藏
document.getElementById("table1").style.display=&#39;none&#39;;
// 把按钮（id 为 B3 ）的文字设置成 &#39;显示表格&#39;
document.getElementById("B3").value="显示表格";
}
else
{
// 把 id 为 table1的元素的设置为显示
document.getElementById("table1").style.display=&#39;block&#39;;
// 把按钮（id 为 B3 ）的文字设置成 &#39;隐藏表格&#39;
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>

Copier après la connexion

[Apprentissage recommandé : Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!