`
maysnow
  • 浏览: 16401 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

tr 的显示隐藏display属性导致firefox 的td colspan问题(ZT)

    博客分类:
  • html
阅读更多
不知道你有没有做过这样的一种效果,一个table中的一个连接,javascript 控制 tr 的显示隐藏,来达到显示更多数据的效果。如果没做过,尝试一下吧,你会发现,table中隐藏的tr的含有colspan的td 在再次显示以后,firefox会把内容合并到 第一个td里。

有点绕,把下面的代码copy以后另存为.html 打开 就知道我说的是什么问题了。锻炼自己的动手能力,我就不贴图了,想知道原因跟解决办法就看下去吧。
01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02	<html xmlns="http://www.w3.org/1999/xhtml">
03	<head>
04	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05	<title>tr 的显示隐藏display属性导致td colspan问题--imouou.com</title>
06	<link href="" type="text/css" rel="stylesheet" ></link>
07	<style>
08	    #table {width:80%;border:1px solid #ccc;border-collapse:collapse;}
09	    #table td{border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
10	</style>
11	 
12	</head>
13	 
14	 <body>
15	  <table id="table">
16	    <tr>
17	        <td>1</td>
18	        <td>2</td>
19	        <td>3</td>
20	        <td>4</td>
21	        <td>5</td>
22	        <td><a href="#" id="view" class="view">查看</a></td>
23	    </tr>
24	    <tr id="dis">
25	        <td>1</td>
26	        <td colspan="6">这里的信息默认是合并了6列的效果,</td>
27	    </tr>
28	    <tr>
29	        <td>1</td>
30	        <td>2</td>
31	        <td>3</td>
32	        <td>4</td>
33	        <td>5</td>
34	        <td><a href="#" id="view" class="view">查看</a></td>
35	    </tr>
36	    <tr id="dis2" style="display:block;">
37	        <td>第一个td</td>
38	        <td colspan="6">当display等于 block 或者 inline 以后,这里在firefox的效果会变成跟 “第一个td” 在一起,然后这里为空</td>
39	    </tr>
40	  </table>
41	 </body>
42	</html>

通过 class 为view的链接,显示隐藏 id 为 dis 的tr ,当tr的属性为 display:block 或者 display:inline 的时候,firefox就会出现显示错误了。 这个究竟是什么原因引起的?我用jquery的 show();hide();来控制显示时,就没有这个问题。看了jquery1.3.2的第3785行show() 函数,里面除了设置它的display属性以外,还多了一个elem.remove();不知道是不是跟这个有关。
01	if ( elemdisplay[ tagName ] ) {
02	    display = elemdisplay[ tagName ];
03	} else {
04	    var elem = jQuery("<" + tagName + " />").appendTo("body");
05	 
06	    display = elem.css("display");
07	    if ( display === "none" )
08	        display = "block";
09	 
10	        elem.remove();
11	 
12	    elemdisplay[ tagName ] = display;
13	}

是table的块元素引起的吗?那怎么inline了以后也会?后来查到csdn有篇文章,好像是firefox的display:block有缓存,那是不是跟上面的elem.remove()也是一样的?display:”没有参数的时候,默认是显示元素,我把应该显示的 display:block 改为 display:” ;解决了firefox的colspan这个问题。但是为什么会这样,还是一知半解,你知道吗?

jquery的demo
01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02	<html xmlns="http://www.w3.org/1999/xhtml">
03	<head>
04	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05	<title>tr 的显示隐藏display属性导致td colspan问题--imouou.com</title>
06	<link href="" type="text/css" rel="stylesheet" ></link>
07	<style>
08	    #table {width:80%;border:1px solid #ccc;border-collapse:collapse;}
09	    #table td{border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
10	</style>
11	<script src="http://www.imouou.com/js/jquery.js" type="text/Javascript" ></script>
12	 
13	<script>
14	    $(function(){
15	         $("#view").toggle(function(){
16	            $("#dis").show();
17	         },function(){
18	            $("#dis").hide();
19	         })
20	    })
21	</script>
22	</head>
23	 
24	 <body>
25	  <table id="table">
26	    <tr>
27	        <td>1</td>
28	        <td>2</td>
29	        <td>3</td>
30	        <td>4</td>
31	        <td>5</td>
32	        <td><a href="#" id="view" class="view">查看</a></td>
33	    </tr>
34	    <tr id="dis" style="display:none;">
35	        <td>1</td>
36	        <td colspan="6">这里的信息默认是合并了6列的效果,当display等于 block 或者 inline 以后,这里在firefox的效果会变成跟 1 在一起,然后这里为空</td>
37	    </tr>
38	  </table>
39	 </body>
40	</html>
分享到:
评论
3 楼 SunsetGrace1 2012-03-13  
SunsetGrace1 写道
我也遇到了,解决方法如下
var display=$('#'+attendlistid).attr('class');
   if(display=="hidden"){
      $('#'+attendlistid).show();
      $('#'+attendlistid).removeClass(display).addClass("show");//已失效,起作用的只是show(),只是作为显示隐藏的条件判断用,为了FF下clospan合并为1个单元格的问题
    }else{
      $('#'+attendlistid).hide();
      $('#'+attendlistid).removeClass(display).addClass("hidden");
    }

2 楼 SunsetGrace1 2012-03-13  
我也遇到了,解决方法如下
var display=$('#'+attendlistid).attr('class');
               
                if(display=="hidden"){
                    $('#'+attendlistid).show();
                    $('#'+attendlistid).removeClass(display).addClass("show");//已失效,起作用的只是show(),只是作为显示隐藏的条件判断用,为了FF下clospan合并为1个单元格的问题
                    $('#attendbtn_'+courseid).val('<%=user.get("ht.university.attendlistbtnhide")%>');
                }else{
                    $('#'+attendlistid).hide();
                    $('#'+attendlistid).removeClass(display).addClass("hidden");
                    $('#attendbtn_'+courseid).val('<%=user.get("ht.university.attendlistbtn")%>');
                }
1 楼 zhaoxiu_1945 2011-11-03  
。。。 你现在知道什么原因了吗,我按照你的方法解决了问题,但是这是问什么啊

相关推荐

    node-v9.2.1-linux-x86.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    node-v9.1.0-linux-s390x.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    2024年中国MXene行业研究报告.docx

    2024年中国MXene行业研究报告

    TensorFlow安装步骤

    附件是TensorFlow安装步骤,文件绿色安全,请大家放心下载,仅供交流学习使用,无任何商业目的!

    ISO IEC 27001-2022 信息安全、网络安全和隐私保护信息安全管理系统要求.pdf

    ISO IEC 27001-2022 信息安全、网络安全和隐私保护信息安全管理系统要求.pdf

    广东工业大学电工学考试试卷B期末考试试题回忆版.doc

    此试题是考试后回忆版本,你会发现是惊喜。恭喜你考个好成绩。

    编译程序构造的一般原理和基本方法.pdf

    编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本方法。编译原理不仅是计算机科学理论的重要组成部分,也是实现高效、可靠的计算机程序设计的关键。本文将对编译原理的基本概念、发展历程、主要内容和实际应用进行详细介绍编译原理是计算机专业的一门核心课程,旨在介绍编译程序构造的一般原理和基本

    node-v8.9.4-linux-x86.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    计算机二级【公共基础知识速学教程】.pdf

    内容概要:这份资料包含了计算机二级公共基础知识速学教程的内容大纲,涵盖了数据结构与算法、程序设计基础、软件工程基础、数据库设计基础等多个章节。其中包括了算法复杂度、数据结构、栈、队列、链表、二叉树、查找、排序等内容,以及程序设计方法、软件工程概念、数据库设计原理等知识点。 适用人群:适合希望系统学习计算机二级公共基础知识的学生、计算机专业学习者、程序员、软件工程师以及对数据结构、算法和数据库设计感兴趣的人群,希望通过系统学习提升自己的计算机基础知识和技能。 使用场景及目标:该教程可用于计算机相关专业的课程学习、自学提升或备考计算机二级公共基础考试。学习者可以通过逐章学习和实践,掌握数据结构与算法、程序设计基础、软件工程基础和数据库设计基础等知识,提高自己在计算机领域的理论基础和实践能力。 其他说明:学习者在使用这份教程时,可以结合实际案例和练习题进行深入学习和巩固。建议按照章节顺序系统学习,理解各个知识点的概念和应用,并通过实践项目或练习加深对计算机基础知识的理解和掌握。通过系统学习,可以提升自己在计算机领域的专业水平和能力。

    IEC 60364-7-722-2018 低压电气装置.第7-722部分:特殊装置或场所的要求.电动车辆的电源.pdf

    IEC 60364-7-722-2018 低压电气装置.第7-722部分:特殊装置或场所的要求.电动车辆的电源.pdf

    ISO IEC 27021-2017 信息技术.安全技术.信息安全管理系统专业人员的能力要求.pdf

    ISO IEC 27021-2017 信息技术.安全技术.信息安全管理系统专业人员的能力要求.pdf

    减速振动控制有限公司

    减速振动控制有限公司

    2024年中国5G基站射频元件行业研究报告.docx

    2024年中国5G基站射频元件行业研究报告

    node-v8.11.3-linux-arm64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    云服务H13831题库HCIE CloudService SolutionsArchitect

    云服务H13831题库HCIE CloudService SolutionsArchitect

    2023年美赛特等奖论文-C-2307166-解密.pdf

    大学生,数学建模,美国大学生数学建模竞赛,MCM/ICM,2023年美赛特等奖O奖论文

    大模型简历模板之CV简历模板1.doc

    大模型简历模板通常包括个人信息、求职目标、教育背景、工作经历、技能专长、项目经验、荣誉奖项等内容。通过清晰的排版和详细的描述,展示出个人的专业能力和职业发展规划,吸引用人单位的注意。

    SBC0001345K.8 SBC0001345K.10 手册

    SBC0001345K.8 SBC0001345K.10 手册

    node-v10.15.1-linux-armv6l.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    MAGLINK LX 控制台手册

    MAGLINK LX 控制台手册

Global site tag (gtag.js) - Google Analytics