如何在点击时展开和折叠html表格行

问题描述:

如何折叠和展开
表格行点击
尝试过以下内容
而且也在工作
但是我想要表的onLoad
它必须处于折叠状态.
并且只有当用户单击时,它才应展开.

但是此代码无法正常工作,它正在加载
行已展开.但是我需要折叠.当页面加载时.

How Can I able to Collapse and Expand
Table rows On click
Have Tried like Below
and is working too
But I want that onLoad of the Table
It must be in collapsed state.
and only when the user clicks,it should Expand.

But this Code is not working as ,its loading
with rows Expanded.But I need to get Collapsed.When the Page Loads.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>

<script type="text/javascript">

function poorman_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
var bExpand = tr.style.display == '''';
tr.style.display = (bExpand ? ''none'' : '''');
}
function poorman_changeimage(id, sMinus, sPlus)
{
var img = document.getElementById(id);
if (img!=null)
{
var bExpand = img.src.indexOf(sPlus) >= 0;
if (!bExpand)
img.src = sPlus;
else
img.src = sMinus;
}
}

function Toggle_trGrpHeader2()
{
poorman_changeimage(''trGrpHeader2_Img'', ''images/minus.gif'', ''images/plus.gif'');
poorman_toggle(''row1'');
poorman_toggle(''row2'');
poorman_toggle(''row3'');
}

function Toggle_trGrpHeader1()
{
poorman_changeimage(''trGrpHeader1_Img'', ''images/minus.gif'', ''images/plus.gif'');
poorman_toggle(''trRow1'');
}
</script>

</head>
<body>

<div>
<table border="1">
<tr id="trGrpHeader1">
<td colspan="4"><span  önclick="javascript:Toggle_trGrpHeader1();"> header for row 1</span></td>
</tr>

<tr id="trRow1">
<td>  Hello</td>
<td class="number">10</td>
<td class="number">1999</td>
<td class="number">2000</td>
</tr>

<tr id="trGrpHeader2">
<td colspan="4"><span  önclick="javascript:Toggle_trGrpHeader2();">header for row 2</span></td>
</tr>

<tr id="row1">
<td>  Hello2</td>
<td class="number">10743</td>
<td class="number">1998</td>
<td class="number">1997</td>
</tr>
<tr id="row2">
<td>  Hello3</td>
<td class="number">10768</td>
<td class="number">2012</td>
<td class="number">2011</td>
</tr>
<tr id="row3">
<td>  Hello4</td>
<td class="number">10793</td>
<td class="number">1995</td>
<td class="number">1993</td>
</tr>

</table>
</div>
</body>
</html>


请协助
要实现这一目标.
我只希望加载时所有行都必须折叠.


Please assist
To achieve This.
I just want that on load all the rows must be collapsed.

我认为您可以通过使用jquary实现此目的,我将发布示例解决方案,希望它将为您提供帮助.

I think you can achieve this by using jquary I''ll post a sample solution and I hope it will helps you.

<html>
	<head>
		<title>jQuary Base Menu</title>
		<script type="text/javascript" src="jquery.js"></script>		
		<script type="text/javascript">


(功能(){
(document).ready(function(){


(" ).hide();
("#m1d").hide();