我为我的表使用了数据表脚本。在这里,我显示了产品列表。
下面是表格的 html 代码(对于这个表格,我也应用了数据表脚本)
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="example" class="hovertable menuclass display">
<thead>
<th width="13%" style="padding-left:3px;">Actions</th>
<th width="21%">Name</th>
<th width="12%">col2</th>
<th width="18%">col3</th>
<th width="10%">col4</th>
<th width="7%">col5</th>
<th width="10%">col6</th>
<th width="5%" class="last">col7</th>
</thead>
<tr >
<td align="left" valign="top" style="width:95px;"><img src="images/minus_icon.png" alt="" border="0"> </td>
<td align="left" valign="top">name1</td>
<td align="left" valign="top">val</td>
<td align="left" valign="top">
value</td>
<td align="left" valign="top">tetse</td>
<td align="center" valign="top">test</td>
<td align="right" valign="top">test</td>
<td align="center" valign="top" class="last">241</td>
</tr>
<tr >
<td align="left" valign="top" style="width:95px;"><img src="images/minus_icon.png" alt="" border="0"> </td>
<td align="left" valign="top">name2</td>
<td align="left" valign="top">val</td>
<td align="left" valign="top">
value</td>
<td align="left" valign="top">tetse</td>
<td align="center" valign="top">test</td>
<td align="right" valign="top">test</td>
<td align="center" valign="top" class="last">241</td>
</tr>
</table>
我的表格行外观是这样的
当我单击“-”图像时,该行将被隐藏并显示为
如果我单击撤消链接,则应再次显示相应的行。
我使用以下代码隐藏特定行。
$('.hdrow').live('click', function(){
$(this).closest('tr').toggle();
});
请参考小提琴http://jsfiddle.net/2F2E5/2/
我不知道如何实现这一点。请帮我。谢谢