0

テーブルにデータテーブルスクリプトを使用しました。ここでは、製品のリストを表示しました。

以下は、テーブルの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/

これを実装する方法がわかりません。私を助けてください。ありがとう

4

1 に答える 1

1

マイナスをクリックしてこれを試して、最も近い行を非表示にし、1 つの td を保持して非表示のメッセージを表示します。

// 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
});

これは迅速かつ十分なはずです。

于 2012-12-03T07:24:27.527 に答える