javascript表格与div显示隐藏几种方法

网页特效表格与div显示隐藏几种方法
方法一:
document.getElementById( "控件ID ").style.visibility= "hidden ";
document.getElementById( "控件ID ").style.visibility= "visible ";
方法二:
document.getElementById( "控件ID ").style.display= "none ";
document.getElementById( "控件ID ").style.display= "inline ";
方法一隐藏后   页面的位置还被控件占用   只是不显示   类似于.net验证控件的

Display=Static
方法二隐藏后   页面的位置不被占用   类似于.net验证控件的Display=Dynamic

好了说了这么多我们来看个实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>层隐藏</title>
</script>
</head>
<script type="text/javascript">
function $(obj){
    return document.getElementById(obj);
}
window.onload = function(){
    var table = document.getElementById("myTable");
    //如果在表格区域内产生单击
    table.onclick = function(e){
        var e = window.event||e,target = e.srcElement||e.target;
        
        //得到tr
        while(target.tagName.toLowerCase() != "tr"){
            target = target.parentNode;
        }
        
        var i = target.rowIndex;
        //单击单行的Tr的话就是控制tr + 1的隐藏和显示
         
        if(i%2 == 0){
                        var nrs = table.rows[i + 1].parentNode.style;
            nrs.display = nrs.display == "none"?"":"none";
        }
    }
}

div显示隐藏

javascript显示隐藏层

< div id="" style="display:none;">广告< /div>
< input type="botton" onclick="函数">

< script language=javascript>
function 函数{
if(thisdiv.style.display=='none'){
thisdiv.style.display=""
}
else
thisdiv.style.display="none"
}

< /script>
你先给div 取个ID=“AA”thisdiv=AA

时间: 2024-09-05 03:15:32

javascript表格与div显示隐藏几种方法的相关文章

javascript控制页面控件隐藏显示的两种方法

javascript|控件|控制|显示|页面 javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility="visible"; 方法二: document.all["PanelSMS

javascript 控制 html元素 显示/隐藏实现代码_javascript技巧

1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

&amp;#106avascript控制页面控件隐藏显示的两种方法

控件|控制|显示|页面 javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位方法一:document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility="visible"; 方法二:document.all["PanelSMS"].style.

js控制页面控件隐藏显示的两种方法介绍_javascript技巧

javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visibility="visible"; 方法二: 复制代码 代码如下: document.all["panelsms&

javascript超过容器后显示省略号效果的方法(兼容一行或者多行)_javascript技巧

javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(-)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写: {width:27em; white-space:nowrap; text-overflow:ellipsis; -o

DIV CSS隐藏内容样式方法大全

 DIV CSS网页布局有很多值得学习的地方,这里和大家重点讨论一下DIV CSS隐藏内容样式方法,相信本文介绍一定会让你有所收获.   DIV CSS隐藏内容样式方法   CSS隐藏的用途   1.对文本的隐藏   2.隐藏超链接(另类黑链)   3.对统计代码隐藏   4.隐藏超出图片   5.CSS隐藏滚动条   6.CSS来隐藏DIV层   使用CSS隐藏方法   1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSSdisplay手册查看   2.使用overfl

JavaScript通过setTimeout实时显示当前时间的方法_javascript技巧

本文实例讲述了JavaScript通过setTimeout实时显示当前时间的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

Android 实现全屏显示的几种方法整理

Android 实现全屏显示的几种方法整理 A.设置主题实现全屏 直接在AndroidManifest.xml文件中设定Activity主题为全屏模式 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" B.代码实现全屏 代码实现需要分两步做,如下: 1.隐藏标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); 2.隐藏状态栏 getWindow().setFlags(Wi

excel表格中隔行选取的三种方法

  excel表格中隔行选取的三种方法          有一个excel表格,需要隔N行选取.可能是隔一行,也可能是隔2行.3行. 常见的隔行选取有两种方法: 一.按ctrl键不松用鼠标逐行选取.如果需要选取的行数多,会累死人的. 二.在辅助设置公式或输入字符 - 设置筛选模式 - 筛选 - 选取 - 取消筛选模式.如果是隔列选取,这种方法就不能用了. 除了以上两种外,本文小编新发现一种新的隔行选取方法,估计绝大部分同学都没见过. 步骤1:在H3中输入公式 =A3:F3,再选取H2:H3向下复