不知道你有没有做过这样的一种效果,一个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>
分享到:
相关推荐
<td>标签属性 表格 属性名 含义 常用属性值 ...在<td>标签的属性中,重点掌握colspan和rolspan,其他的属性了解即可,不建议使用,均可用CSS样式属性替代。 当对某一个<td>标签应用height属性设置高度时,该
代码如下:$(“#tableName td:not([colspan])”)下面是一些补充资料:filter()和not(): [removed] $(document).ready(function() { //输出 hello alert($(“p”).filter(“.selected”).html()); //输出 How ...
checked="checked"/>宋朝</td><td>唐朝"/>唐朝</td><td>明朝"/>明朝</td><td>元朝"/>元朝</td></tr><tr><td> </td></tr><tr><td>题目2:</td><td colSpan="3">字母a后边的字母为</td></tr><tr><td></td><td>...
<td colspan="2" align="center"> 第二行的单元格 </td> </tr> <tr > <td> 第一行的单元格 </td> <td> 第二行的单元格 </td> <td> 第三行的单元格 </td> </tr> </table>
<TD colSpan=4> </TD> </TR> <TR height=30> <TD width=380> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR height=40> <TD rowSpan=4> </TD> <TD>用户名:...
<TD bgColor=#908a47 colSpan=2></TD> <TD bgColor=#f7f8f9></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47></TD> <TD bgColor=#f7f8f9 ...
代码片段: <tr class="info"> <td>姓名</td> ...<td>性别</td> ...<td>年龄</td> ...<td>电话</td> ...<td>操作</td> ...</tr> ...<td colspan="5" class="danger">增加</button></td> </tr> </table>
<td colspan="2" style="height: 23px"> </td> </tr> <tr> <td colspan="2" style="height: 23px"> <strong><span style="font-size: 14pt; color: #0000cc">请留下你宝贵的观点,有你支持我们将做的更好!...
<TD vAlign=top background=/images/bg_1.jpg colSpan=10> <TABLE cellSpacing=3 cellPadding=0 width="100%" border=0><TBODY> <TR> <TD width="95%" height=1216> ...
<td colspan="2">用户登录</div></td> </tr> <tr> <td colspan="2"><div align="center"> </div></td> </tr> <tr> <td width="150">用户名:</div></td> <td width="250"> </label></td> </tr> ...
<tr><td colspan="2"><jsp:include page="view/AdminTop.jsp" /></td></tr> <tr bgcolor="#F0EAED"> <td width="180" valign="top"><jsp:include page="view/AdminLeft.jsp"/></td> <td width="598" align=...
<td height="33" colspan="3" valign="middle" bgcolor="#F7F7F7">新进图书</span></td> </tr> <tr> <td height="10"></td> <td></td> <td></td> </tr> <tr> <td height="172"></td> <td valign="top">...
"投入数</td><td colspan=4 align=center valign=middle>完成机头数</td><td colspan=4 align=center valign=middle>包装数</td><td colspan=4 align=center valign=middle>入库数</td><td rowspan=2>待入库</td>...
<TD colSpan=6><img height=19 alt="" src="http://img03.taobaocdn.com/imgextra/i3/T2fsxLXddaXXXXXXXX-712306726.jpg" width=532></TD> <TD>...
在复杂的表格结构中,有的单元格在垂直方向上是跨多个单元格的,这就需要使用跨列属性COLSPAN。基本语法<TD COLSPAN=VALUE>语法解释VALUE代表单元格跨的列数。文件范例:10-33.htm通过COLSPAN属性实现跨列的单元格。...
则给当前的td的父元素的兄弟元素添加td,如果td的colspan属性值大于1,则在当前的td元素后添加td 代码如下: //本文首发博客园:http://artwl.cnblogs.com(2012/02/08)jQuery.fn.RevertTable=function(){ $(“tr”,...
其中一个cs代码显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题页 ...
<td colspan="2" style="height: 62px"> </td> </tr> <tr> <td style="width: 20%"> </td> <td style="width: 80%"><asp:TextBox ID="txtUser" runat="server" Width="194px"></asp:TextBox></td> ...
eWeb editor编辑器文件,说明,使用方法:将解压后的editor文件夹... <td colspan="3"> Height="0px" BorderStyle="None" style="display:none"> </td> </tr> IIS中要配置能够访问asp页面即可。