Jquery为嵌套表选择td
Jquery selecting td for nested tables
我在父表行中声明了一个子表，我想在单击父表的一个单元格时切换子表的可见性。默认情况下，当页面加载时，子表应该是隐藏的。
我的点击事件在父td元素(类showmore)被检测到，但我有困难找到正确的选择器改变父tr元素(类order_extra_info)的css属性，其中包含子表。通过在这一行上设置css属性display:none，我想完全隐藏包含在其中的子表。
与当前的jquery代码，似乎我正在选择子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>使用$('tr.order_extra_info#' + id).toggle();
您的选择器是正确的，但是您正在尝试检查可见性，并且基于试图显示/隐藏错误。
用jquery的.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>您可以像使用toggle()那样做。
$(document).on('click', 'td.showmore', function() {
$(this).closest('tr').next('tr.order_extra_info').toggle()
});
就用.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>$(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>使用jQuery .toogle()和:nth-child() Selector
$(document).ready(function(){
$(".order_extra_info").each(function(){
$(this).click(function () {
$(this).next().toggle(".order-extra-infor-shown");
});
});
});.order-extra-infor-shown {
display:inline !important;
}
.table tr:nth-child(2n){
display: none;
}<!DOCTYPE html>
<html>
<head>
<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/1.12.4/jquery.min.js"></script>
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=''selected'']').prop('checked', this.checked);">
</th>
<th class="text-right">ID </th>
<th class="text-left">Status</th>
<th class="text-right">Total</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr class="order_extra_info">
<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_infos" 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>
<tr class="order_extra_info">
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1546</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_infos">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra a</td>
<td class="text-left" width="25%">Extra b</td>
<td class="text-left" width="50%">Extra c</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>
</body>
</html>相关文章：
- 选择所有td's基于所选内容覆盖多行
- JQuery选择器:如果同级具有.class，则选择td
- 使用 Jquery 选择一个 td 元素
- jQuery将输入集中在下一个tr->td时，td包含一个输入字段，但从不关注html选择
- 通过属性名称选择每个td，然后给出'未定义'用于属性值
- Jquery 无法在单击时选择和取消选择 td
- jQuery选择器，用于查找包含具有特定值的TD输入的TR
- 如何在选定的 tr 对象中选择 td
- javascript选择td´s并计数重复项
- 选择TD类别
- 选择所有按钮以选择td标签
- Jquery从另一个td中选择td值
- 如何在具有特定id的表中选择td
- Jquery为嵌套表选择td
- 在tr中选择td元素
- 在 HTML 表格中选择和取消选择 TD
- 从tr中选择td first child不会成功
- 如果复选框处于启用状态，请选择td元素
- 选择TD中的标签
- 在ul - li层次结构中选择td的所有innerHTML
