Jquery select td для вложенных таблиц

Question

У меня есть дочерняя таблица, объявленная внутри родительской строки таблицы, и я хотел бы переключить видимость дочерней таблицы, когда была нажата ячейка родительской таблицы. Детский стол должен быть по умолчанию скрыт при загрузке страницы.

Обнаружено мое событие click на родительском элементе td (класс showmore), но мне трудно найти правильный селектор для изменения свойства css родительского элемента tr (class order_extra_info), который содержит дочернюю таблицу. Установив отображение свойства css: none в этой строке, я хотел бы полностью скрыть дочернюю таблицу, содержащуюся внутри.

С текущим кодом jquery кажется, что я выбираю child td. Какие-либо предложения?

$(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>

Answer 1

Использование $('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>

Answer 2

Вы можете сделать это с помощью следующих toggle().

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

Answer 3

Просто используйте .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>

Answer 4

$(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>

Answer 5

Использование JQuery и CSS3 .toogle():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>