Jquery为嵌套表选择td

Posted

技术标签:

【中文标题】Jquery为嵌套表选择td【英文标题】：Jquery selecting td for nested tables 【发布时间】：2017-02-01 06:11:55 【问题描述】：

我在父表行内声明了一个子表，我想在单击父表的单元格时切换子表的可见性。当页面加载时，子表默认应该是隐藏的。

正在检测到我在父 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" >Extra 1</td>
              <td class="text-left" >Extra 2</td>
              <td class="text-left" >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>

【问题讨论】：

【参考方案1】：

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

您的选择器是正确的，但您正在尝试检查可见性并基于尝试显示/隐藏错误。

只使用jquery的.toggle()函数代替那些多余的步骤。

请查看下面的 sn-p 以获得更多不理解。

$(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" >Extra 1</td>
              <td class="text-left" >Extra 2</td>
              <td class="text-left" >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>

【讨论】：

这个解决方案适用于给定的代码 sn-p，我认为它是正确的，但我无法让它在我的完整代码上运行。我的完整代码使用完全相同的 sn-p，只是它是一个更大的表，具有更多的行和列。有什么想法可能是错的吗？ 没有错误，我认为这与考虑到我的嵌套表的选择器有关。 在 onclick 函数中放置 console.log($('tr.order_extra_info#' + id).html()) 并检查你得到了什么。 我得到“未定义”。这是一个没有按预期工作的更多表数据的小提琴。 jsfiddle.net/L33ofpj3 我已经检查了sn-p。 id="1545" 在 sn-p 中多次出现，这是完全错误的。 id 在 dom 中应该是唯一的。【参考方案2】：

您可以使用toggle() 进行如下操作。

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

【讨论】：

【参考方案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" >Extra 1</td>
              <td class="text-left" >Extra 2</td>
              <td class="text-left" >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>

【讨论】：

【参考方案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" >Extra 1</td>
              <td class="text-left" >Extra 2</td>
              <td class="text-left" >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>

【讨论】：

【参考方案5】：

使用 jQuery .toogle() 和 CSS3 :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" >Extra 1</td>
						<td class="text-left" >Extra 2</td>
						<td class="text-left" >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" >Extra a</td>
						<td class="text-left" >Extra b</td>
						<td class="text-left" >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>

【讨论】：

以上是关于Jquery为嵌套表选择td的主要内容，如果未能解决你的问题，请参考以下文章

无法将嵌套的表输入元素放入jQuery数组中

嵌套表不占用父td的100％高度

应用：不在嵌套表中

如何防止 jQuery 选择器包含嵌套元素？

如何创建具有多个子行（嵌套表）的 jQuery 数据表？

使用 jQuery 从表条带化中排除嵌套表