请教下页面显示/隐藏部分tr出现FF下正常IE下偏慢可能是什么原因？

newbieeee 2010-01-15 03:12:57

想实现的效果就是显示/隐藏部分tr来达到展开/收起的效果，测试页面如下，也没有什么问题。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function hide(id, count)

{

	var x;

	for (var i=1; i<count; i++)

	{

		x = document.getElementById(id+'Sub'+i)

		if (x.style.display == "")

			x.style.display = "none";

		else

			x.style.display = "";

	}

}

</script>

</head>

<body>

<table border="1">

	<tr id="1"><td><input type="button"  onclick="hide(1, 5)" value="点我" /></td><td>AAAA</td></tr>

	<tr id="1Sub1" style="display:none"><td></td><td>AAAA1</td></tr>

	<tr id="1Sub2" style="display:none"><td></td><td>AAAA2</td></tr>

	<tr id="1Sub3" style="display:none"><td></td><td>AAAA3</td></tr>

	<tr id="1Sub4" style="display:none"><td></td><td>AAAA4</td></tr>

		

	<tr id="2"><td><input type="button"  onclick="hide(2, 5)" value="点我" /></td><td>BBBB</td></tr>

	<tr id="2Sub1" style="display:none"><td></td><td>BBBB1</td></tr>

	<tr id="2Sub2" style="display:none"><td></td><td>BBBB2</td></tr>

	<tr id="2Sub3" style="display:none"><td></td><td>BBBB3</td></tr>

	<tr id="2Sub4" style="display:none"><td></td><td>BBBB4</td></tr>

	

	<tr id="3"><td><input type="button"  onclick="hide(3, 5)" value="点我" /></td><td>CCCC</td></tr>

	<tr id="3Sub1" style="display:none"><td></td><td>CCCC1</td></tr>

	<tr id="3Sub2" style="display:none"><td></td><td>CCCC2</td></tr>

	<tr id="3Sub3" style="display:none"><td></td><td>CCCC3</td></tr>

	<tr id="3Sub4" style="display:none"><td></td><td>CCCC4</td></tr>

	

</table>

</body>

</html>

现在的问题是，当页面元素比较复杂（table的布局。。。），数据量比较大时（加上隐藏的大概总记录在几千行，页面2M左右），点击展开/收起，在FF下基本无延迟（约半秒左右），而在IE下延迟非常明显，大概需要3-5秒的时间。

请问这个主要是什么原因？有什么改进的方法么？现在完全没头绪，不知道该从什么地方修改，请教诸位了。多谢。

...全文