解决火狐中tr的display属性导致colspan属性失效问题

问题是这样的：一个表格中（N行2列）的某一行先初始化的时候，这行使用了display:none隐藏了，然后通过某个事件，把显示出来。

看起来是个很容易的js，先给tr设置一个ID，然后使用document.getElementById("ID").style.display="block";就可以了。可这句在IE中是正常的，一点问题都没有。可把这个放到FF中，效果就不一样了。见下面的代码：

01	<table width="450" border="1" cellspacing="0" cellpadding="0">

02

<tr>

03	<td>&nbsp;百度</td>

04	<td>&nbsp;csdn</td>

05

</tr>

06	<tr id="ID" style="display:none;">

07	<td>&nbsp;站长网</td>

08	<td>&nbsp;asp编程网</td>

09

</tr>

10

<tr>

11	<td>&nbsp;新浪</td>

12	<td>&nbsp;google</td>

13

</tr>

14

</table>

15

16	<input type="button" onClick="f()" value="显示" />

17	<script type="text/javascript">

18	function f(){

19	document.getElementById("ID").style.display="block";

20

}

21

</script>

(鼠标移到代码上去，在代码的顶部会出现四个图标，第一个是查看源代码，第二个是复制代码，第三个是打印代码，第四个是帮助)

分别在IE、FF和Chrome中测试一下以上的代码，点击里面的显示按纽看看效果，两个明显不一样的效果

 

原因：这是两个不同的浏览器引起的

 

解决方法：要先判断是哪种浏览器，然后给display赋值不同的属性，IE中display赋值为block就可以了，FF和chrome中需要给display赋值为table-row。代码如下：

01	<table width="450" border="1" cellspacing="0" cellpadding="0">

02

<tr>

03	<td>&nbsp;百度</td>

04	<td>&nbsp;csdn</td>

05

</tr>

06	<tr id="ID" style="display:none;">

07	<td>&nbsp;站长网</td>

08	<td>&nbsp;asp编程网</td>

09

</tr>

10

<tr>

11	<td>&nbsp;新浪</td>

12	<td>&nbsp;google</td>

13

</tr>

14

</table>

15

16	<input type="button" onClick="f()" value="显示" />

17	<script type="text/javascript">

18	var BrowseType="";

19	if(getbrowse()=="MSIE"){

20	BrowseType="block";

21

}

22

else{

23	BrowseType="table-row";

24

}

25	function f(){

26	document.getElementById("ID").style.display=BrowseType;

27

}

28	function getbrowse(){ //判断当前浏览器是何种浏览器

29	var str="";

30	// 包含「Opera」文字列

31	Agent=navigator.userAgent;

32	if(Agent.indexOf("Opera") != -1) {

33	str='Opera';

34

}

35	// 包含「MSIE」文字列

36	else if(Agent.indexOf("MSIE") != -1) {

37	str='MSIE';

38

}

39	// 包含「Firefox」文字列

40	else if(Agent.indexOf("Firefox") != -1) {

41	str='Firefox';

42

}

43	// 包含「Netscape」文字列

44	else if(Agent.indexOf("Netscape") != -1) {

45	str='Netscape';

46

}

47	// 包含「Safari」文字列

48	else if(Agent.indexOf("Safari") != -1) {

49	str='Safari';

50

}

51

else{

52

}

53	return str;

54

}

55

</script>

(鼠标移到代码上去，在代码的顶部会出现四个图标，第一个是查看源代码，第二个是复制代码，第三个是打印代码，第四个是帮助)

这样就解决了。

再去IE、FF和Chrome三个浏览器中试试，是不是都正常了