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

最新推荐文章于 2023-04-07 15:08:09 发布

最新推荐文章于 2023-04-07 15:08:09 发布 · 304 阅读

文章标签：

#Firefox #jQuery #JavaScript #XHTML #CSS #ViewUI

html 专栏收录该内容

0 篇文章

订阅专栏

不知道你有没有做过这样的一种效果，一个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();不知道是不是跟这个有关。
[code]
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 }
[/code]
是table的块元素引起的吗？那怎么inline了以后也会？后来查到csdn有篇文章，好像是firefox的display:block有缓存，那是不是跟上面的elem.remove()也是一样的？display:”没有参数的时候，默认是显示元素，我把应该显示的 display:block 改为 display:” ；解决了firefox的colspan这个问题。但是为什么会这样，还是一知半解，你知道吗？

jquery的demo
[code]
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>
[/code]