ネストしたテーブルのtdを選択するJQuery

親テーブルの行内に子テーブルが宣言されています。親テーブルのセルがクリックされたときに子テーブルの表示を切り替えたいと思います。ページが読み込まれると、子テーブルはデフォルトで非表示にする必要があります。ネストしたテーブルのtdを選択するJQuery

親td要素（クラスshowmore）での私のクリックイベントが検出されていますが、子テーブルを含む親tr要素（クラスorder_extra_info）のcssプロパティを変更するための正しいセレクタを見つけることができません。この行にcssプロパティdisplay：noneを設定することで、その中に含まれる子テーブルを完全に非表示にしたいと思います。

現在のjqueryコードでは、私は子供を選択しているようです。助言がありますか？

$(document).on('click', 'td.showmore', function() { 
 
    var id = ($(this).html()); 
 
    if ($('tr.order_extra_info#' + id + ' td').is(":visible")) { 
 
    $('tr.order_extra_info#' + id + ' td').css("display", "none"); 
 
    } else { 
 
    $('tr.order_extra_info#' + id + ' td').css("display","table-cell"); 
 
    } 
 
});

.order_extra_info { 
 
    display:none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <td style="width: 1px;" class="text-center"> 
 
     <input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);"> 
 
     </td> 
 
     <td class="text-right">ID </td> 
 
     <td class="text-left">Status</td> 
 
     <td class="text-right">Total</td> 
 
     <td class="text-left">Date</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="text-center"> 
 
     <input type="checkbox" name="selected[]" value="1545"> 
 
     <td class="text-right showmore">1545</td> 
 
     <td class="text-left">waiting</td> 
 
     <td class="text-right">50</td> 
 
     <td class="text-left">18.09.2016</td> 
 
    </tr> 
 
    <tr class="order_extra_info" id="1545"> 
 
     <td colspan="15"> 
 
     <table class="table table-bordered table-hover"> 
 
      <thead> 
 
      <tr> 
 
       <td class="text-left" width="25%">Extra 1</td> 
 
       <td class="text-left" width="25%">Extra 2</td> 
 
       <td class="text-left" width="50%">Extra 3</td> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2016-09-23 Florin C.

使用$('tr.order_extra_info#' + id).toggle();

あなたの選択は正しかったが、あなたは間違っていた/非表示を表示しようとしているに基づいて、視認性をチェックしようとしています。

これらの冗長なステップの代わりに、.toggle() jqueryの機能を使用してください。

詳細については、以下のスニペットを確認してください。

$(document).on('click', 'td.showmore', function() { 
 
    var id = ($(this).html()); 
 
    $('tr.order_extra_info#' + id).toggle(); 
 
});

.order_extra_info { 
 
    display:none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <td style="width: 1px;" class="text-center"> 
 
     <input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);"> 
 
     </td> 
 
     <td class="text-right">ID </td> 
 
     <td class="text-left">Status</td> 
 
     <td class="text-right">Total</td> 
 
     <td class="text-left">Date</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="text-center"> 
 
     <input type="checkbox" name="selected[]" value="1545"> 
 
     <td class="text-right showmore">1545</td> 
 
     <td class="text-left">waiting</td> 
 
     <td class="text-right">50</td> 
 
     <td class="text-left">18.09.2016</td> 
 
    </tr> 
 
    <tr class="order_extra_info" id="1545"> 
 
     <td colspan="15"> 
 
     <table class="table table-bordered table-hover"> 
 
      <thead> 
 
      <tr> 
 
       <td class="text-left" width="25%">Extra 1</td> 
 
       <td class="text-left" width="25%">Extra 2</td> 
 
       <td class="text-left" width="50%">Extra 3</td> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2016-09-23 11:44:31

このソリューションでは、与えられたコードスニペット上で動作し、私は正しい、それを投票していますが、私はそれは私の完全なコードを動作させることはできません。私の完全なコードは正確に同じスニペットを使用しているだけで、より多くの行と列を持つより大きなテーブルです。何が間違っている可能性があるかに関するアイデア？ –

コンソールを確認してください。そこに何かエラーがありますか？ –

エラーはありません、私はそれが私のネストしたテーブルを考慮してセレクタに関連するものだと思います。 –

あなたはtoggle()を使用して、次のようにそれを行うことができます。

$(document).on('click', 'td.showmore', function() { 
    $(this).closest('tr').next('tr.order_extra_info').toggle() 
});

出典

2016-09-23 11:43:34 Azim

だけ使用.toggle()

$(document).on('click', 'td.showmore', function() { 
 
    var id = $(this).html(); 
 
    $('tr.order_extra_info#' + id).toggle(); 
 
});

.order_extra_info { 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <td style="width: 1px;" class="text-center"> 
 
     <input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);"> 
 
     </td> 
 
     <td class="text-right">ID</td> 
 
     <td class="text-left">Status</td> 
 
     <td class="text-right">Total</td> 
 
     <td class="text-left">Date</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="text-center"> 
 
     <input type="checkbox" name="selected[]" value="1545"> 
 
     <td class="text-right showmore">1545</td> 
 
     <td class="text-left">waiting</td> 
 
     <td class="text-right">50</td> 
 
     <td class="text-left">18.09.2016</td> 
 
    </tr> 
 
    <tr class="order_extra_info" id="1545"> 
 
     <td colspan="15"> 
 
     <table class="table table-bordered table-hover"> 
 
      <thead> 
 
      <tr> 
 
       <td class="text-left" width="25%">Extra 1</td> 
 
       <td class="text-left" width="25%">Extra 2</td> 
 
       <td class="text-left" width="50%">Extra 3</td> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2016-09-23 11:46:11 Pugazh

$(document).on('click', 'td.showmore', function() { 
 
    var id = ($(this).html()); 
 
    $('#'+ id).toggle(); 
 
});

.order_extra_info { 
 
    display:none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <td style="width: 1px;" class="text-center"> 
 
     <input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);"> 
 
     </td> 
 
     <td class="text-right">ID </td> 
 
     <td class="text-left">Status</td> 
 
     <td class="text-right">Total</td> 
 
     <td class="text-left">Date</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="text-center"> 
 
     <input type="checkbox" name="selected[]" value="1545"> 
 
     <td class="text-right showmore">1545</td> 
 
     <td class="text-left">waiting</td> 
 
     <td class="text-right">50</td> 
 
     <td class="text-left">18.09.2016</td> 
 
    </tr> 
 
    <tr class="order_extra_info" id="1545"> 
 
     <td colspan="15"> 
 
     <table class="table table-bordered table-hover"> 
 
      <thead> 
 
      <tr> 
 
       <td class="text-left" width="25%">Extra 1</td> 
 
       <td class="text-left" width="25%">Extra 2</td> 
 
       <td class="text-left" width="50%">Extra 3</td> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
       <td class="text-left">Data 
 
       <br>Data 
 
       <br>Data 
 
       <br>Data</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2016-09-23 11:50:24

使用jQueryの.toogle()とCSS3 :nth-child() Selector

$(document).ready(function(){ 
 
\t $(".order_extra_info").each(function(){ 
 
\t \t $(this).click(function() { 
 
\t \t $(this).next().toggle(".order-extra-infor-shown"); 
 
\t \t }); 
 
\t }); 
 
});

.order-extra-infor-shown { 
 
    display:inline !important; 
 
} 
 
.table tr:nth-child(2n){ 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 
<body> 
 

 
\t <table class="table table-bordered table-hover"> 
 
\t \t <thead> 
 
\t \t <tr> 
 
\t \t \t <th style="width: 1px;" class="text-center"> 
 
\t \t \t \t <input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);"> 
 
\t \t \t </th> 
 
\t \t \t <th class="text-right">ID </th> 
 
\t \t \t <th class="text-left">Status</th> 
 
\t \t \t <th class="text-right">Total</th> 
 
\t \t \t <th class="text-left">Date</th> 
 
\t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t <tr class="order_extra_info"> 
 
\t \t \t <td class="text-center"> 
 
\t \t \t \t <input type="checkbox" name="selected[]" value="1545"> 
 
\t \t \t <td class="text-right showmore">1545</td> 
 
\t \t \t <td class="text-left">waiting</td> 
 
\t \t \t <td class="text-right">50</td> 
 
\t \t \t <td class="text-left">18.09.2016</td> 
 
\t \t </tr> 
 
\t \t <tr class="order_extra_infos" id="1545"> 
 
\t \t \t <td colspan="15"> 
 
\t \t \t \t <table class="table table-bordered table-hover"> 
 
\t \t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td class="text-left" width="25%">Extra 1</td> 
 
\t \t \t \t \t \t <td class="text-left" width="25%">Extra 2</td> 
 
\t \t \t \t \t \t <td class="text-left" width="50%">Extra 3</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t </thead> 
 
\t \t \t \t \t <tbody> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td class="text-left">Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data</td> 
 
\t \t \t \t \t \t <td class="text-left">Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data</td> 
 
\t \t \t \t \t \t <td class="text-left">Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t </tbody> 
 
\t \t \t \t </table> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr class="order_extra_info"> 
 
\t \t \t <td class="text-center"> 
 
\t \t \t \t <input type="checkbox" name="selected[]" value="1545"> 
 
\t \t \t <td class="text-right showmore">1546</td> 
 
\t \t \t <td class="text-left">waiting</td> 
 
\t \t \t <td class="text-right">50</td> 
 
\t \t \t <td class="text-left">18.09.2016</td> 
 
\t \t </tr> 
 
\t \t <tr class="order_extra_infos"> 
 
\t \t \t <td colspan="15"> 
 
\t \t \t \t <table class="table table-bordered table-hover"> 
 
\t \t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td class="text-left" width="25%">Extra a</td> 
 
\t \t \t \t \t \t <td class="text-left" width="25%">Extra b</td> 
 
\t \t \t \t \t \t <td class="text-left" width="50%">Extra c</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t </thead> 
 
\t \t \t \t \t <tbody> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td class="text-left">Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data</td> 
 
\t \t \t \t \t \t <td class="text-left">Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data</td> 
 
\t \t \t \t \t \t <td class="text-left">Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data 
 
\t \t \t \t \t \t \t <br>Data</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t </tbody> 
 
\t \t \t \t </table> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
</body> 
 
</html>

出典

2016-09-23 13:21:28

ネストしたテーブルのtdを選択するJQuery

答えて

関連する問題