[英]Jquery datatable show hide
我在表中使用了數據表腳本。 在這里,我顯示了產品列表。
以下是表格的html代碼(對於該表格,我也應用了datatable腳本)
<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/
我不知道如何實現這一點。 請幫我。 謝謝
單擊減號,嘗試此操作隱藏最近的行,並保持一小段時間以顯示隱藏的消息。
// Live is depreciated use new `on` method.
$(document).on('click','.minusSign',function(){
$(this).closest('tr').children().hide();
$(this).closest('tr').find('td.message').show();
// Assuming td.message is another table data with 'Product name is now hidden `undo`'
});
然后點擊撤消隱藏消息td
並顯示該行。
$(document).on('click','td.message a.undu',function(e){
e.preventDefault();
$(this).closest('tr').children().show();
$(this).closest('td.message').hide(); // Here `this` is undo link
});
這應該足夠快捷。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.