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

maysnow

浏览: 16783 次
性别:
来自: 北京

最近访客更多访客>>

bbpgkg

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html

Firefox jQuery JavaScript XHTML CSS

不知道你有没有做过这样的一种效果，一个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>

分享到：

记录下php的一些基础知识,以免忘记 | php计划任务的实现 (zt)

2010-04-27 15:05
浏览 5528
评论(3)
分类:Web前端
查看更多

3 楼 SunsetGrace1 2012-03-13

SunsetGrace1 写道

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

。。。你现在知道什么原因了吗，我按照你的方法解决了问题，但是这是问什么啊

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论