Jquery为嵌套表

时间：2016-09-23 11:36:13

标签： javascript jquery jquery-selectors html-table

我在父表行中声明了一个子表，我希望在单击父表的单元格时切换子表的可见性。默认情况下，子页面应在页面加载时隐藏。

我正在检测父td元素（类showmore）上的click事件，但是我无法找到正确的选择器来更改包含子表的父tr元素（class order_extra_info）的css属性。通过在此行上设置css属性display：none，我想完全隐藏包含在其中的子表。

使用当前的jquery代码，我似乎正在选择子td。有什么建议吗？

＆＃13;
＆＃13; 
$(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");
  }
});
＆＃13; 
.order_extra_info {
  display:none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

使用$('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>

答案 1 :(得分：0)

您可以像使用toggle()一样执行此操作。

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

答案 2 :(得分：0)

只需使用.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>

答案 3 :(得分：0)

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

答案 4 :(得分：0)

使用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" 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>

相关问题
最新问题