javascript - Jquery为嵌套表选择td

Question

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

正在检测父 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>

Answer 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>