zoukankan      html  css  js  c++  java
  • Firefox、chrome下隐藏表格行不能使用block

    Firefox下隐藏表格行不能使用block

    如下一段代码,在IE下能正常执行,但在Firefox下执行却有点不正常:
    <script language="javascript">
    function TestBlack(TagName){
    var obj = document.getElementById(TagName);
    if(obj.style.display=="block"){
       obj.style.display = "none";
    }else{
       obj.style.display = "block";
    }
    }
    </script>
    <table width="760" border="0" cellspacing="0" cellpadding="0">
        <tr onclick="TestBlack('divb');">
            <td width="760" height="20" bgcolor="#00CCFF">Click Me!</td>
        </tr>
        <tr id="divb" style="display:block;">
            <td width="760" height="60" bgcolor="#9966FF"></td>
        </tr>
    </table>

    有网友说可能是CSS对表格的处理能力比较弱,个人认为不然,因为上边代码在IE却是能正常执行的;也有网友说是因为在Firefox中执行"display:none;"后没有回收"display:block;"开辟的页面空间,下次再执行"display:block;"又会在页面上重新创建显示空间,这种解释也站不住脚,如下代码当在div上使用时Firefox执行是正常的:
    <script language="javascript">
    function TestBlack(TagName){
    var obj = document.getElementById(TagName);
    if(obj.style.display=="block"){
       obj.style.display = "none";
    }else{
       obj.style.display = "block";
    }
    }
    </script>
    <div style=" 760px; height:20px;" onclick="TestBlack('diva');">Click Me!</div>
    <div id="diva" style="760px; height:60px; display:block;"></div>

    目前为止还没找到一个可信的原因,但那并不意味着在在Firefox下就无法动态的显示/隐藏表格行,有细心的网友发现使用'style.display="";'代替'style.display="block";'就能正常执行了:
    <script language="javascript">
    function TestBlack(TagName){
    var obj = document.getElementById(TagName);
    if(obj.style.display==""){
       obj.style.display = "none";
    }else{
       obj.style.display = "";
    }
    }
    </script>
    <table width="760" border="0" cellspacing="0" cellpadding="0">
        <tr onclick="TestBlack('divc');">
            <td width="760" height="20" bgcolor="#00CCFF">Click Me!</td>
        </tr>
        <tr id="divc">
            <td width="760" height="60" bgcolor="#9966FF"></td>
        </tr>
    </table>

  • 相关阅读:
    【方法1】删除Map中Value反复的记录,而且仅仅保留Key最小的那条记录
    hdu3415 Max Sum of Max-K-sub-sequence 单调队列
    HBase总结(十八)Hbase rowkey设计一
    Makefile生成器,使用C++和Boost实现
    quartz cron表达式在线生成
    NS3网络仿真(6): 总线型网络
    连载:面向对象葵花宝典:思想、技巧与实践(35)
    zoj 2921 Stock(贪心)
    11g RAC 加节点 之 手动加入vip 资源
    [Unity3D]Unity+Android交互教程——让手机&quot;动&quot;起来
  • 原文地址:https://www.cnblogs.com/jeremy84/p/3810459.html
Copyright © 2011-2022 走看看