1

いくつかの tbody に分割されたテーブルがあります。各 tbody の最初の行にはボタンがあり、この tbody の他のすべての行を非表示にするために使用されます。

これを達成する方法がわからない。

私のHTML：

<table>
   <tbody>
       <tr>
           <td><button class="hide_button_main"> x </button></td>
           <td>Label</td>
       </tr>
        <tr>
            <td>Zone 1</td>
            <td></td>
        </tr>
        <tr>
            <td>Zone 2</td>
            <td></td>
        </tr> 
        <tr>
            <td>Zone 3</td>
            <td></td>
        </tr> 
       <tr>
            <td>Zone 4</td>
            <td></td>
        </tr> 
   </tbody>

ゾーン 1 から 4 の行は非表示になりますが、ラベルのある行は非表示になります

私のJquery：

     $('.hide_button_main').click(function(e) {

   // var rows = $(this).closest('tbody').find('tr').length;

    var rows = $(this).closest('tbody');

        rows.each(function() {

      alert('1');

    });


});
4

5 に答える 5

2

あなたはこれを使うことができます

$('.hide_button_main').click(function(e){
    $(this).closest('tbody').hide();
});

またはあなたがtbodyの子供を隠したいならこのようにしてください

$('.hide_button_main').click(function(e){
    $(this).closest('tbody').find('tr').hide();
});
于 2013-02-21T12:52:38.837 に答える
0

これは機能するはずです：

$('.hide_button_main').click(function(e){
    $(this).closest('tr').siblings().hide(); // hide all except self
});
于 2013-02-21T12:54:21.067 に答える
0

私はこれがそれをするべきだと思います

$('table').on('click', '.hide_button_main', function(e) {
    var target = $(e.currentTarget);
    var row = target.closest('tr');
    console.log('console', target, row, row.siblings())
    row.siblings().hide();
});

デモ：フィドル

ここでは、jQuery.onを使用して委任されたイベント登録モデルを使用しました。これは、イベントハンドラーをアタッチする必要のある要素が多数ある場合に推奨されます。

于 2013-02-21T12:54:37.013 に答える
0

最初の行以外のすべての行を非表示にします...

  $('.hide_button_main').click(function(e){
        $(this).closest('tbody').find('tr:not(:first)').hide();
    });
于 2013-02-21T12:57:25.393 に答える
0

彼はすべての兄弟行を非表示にしたいので、次のようにします。

$('.hide_button_main').click(function (e) {
   var $currentRow = $(this).closest('tr');
   var $otherRows = $currentRow.siblings();
   $otherRows.hide();
});

デモ: http://jsfiddle.net/NeXMh/1/

編集

複数のテーブルを操作する場合は、単一のイベント ハンドラーを使用します。

$('table').on(click, '.hide_button_main', (function (e) {
   var $currentRow = $(this).closest('tr');
   var $otherRows = $currentRow.siblings();
   $otherRows.hide();
});
于 2013-02-21T12:55:07.020 に答える