javascript隐藏表格的方法:首先创建一个html示例文件;然后在body中创建一个table表格;最后通过js代码“getelementbyid(table1).style.display='block';”实现隐藏即可。
本文操作环境:windows7系统、javascript1.8.5版、dell g3电脑。
javascript显示和隐藏一个表格
这里主要用到 document.getelementbyid(元素id) 方法 和 元素的 style.display 属性。文件名取名叫 dohide.htm , 代码如下:
<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>
【推荐学习:javascript高级教程】
以上就是javascript怎么隐藏表格的详细内容。