在父行上显示隐藏行单击

Question

我有行但是隐藏了一行，我需要在点击父行链接时显示它们.btn-link ...

所以当我点击'details' - class =“btn-link”时，我需要显示下一行有“showDetails”类和隐藏的人

点击后没有任何反应。为什么我的代码不起作用？

$(".btn-link").click(function() {
  $(this).closest('tr.showDetails').show();
});

.showDetails {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="#" class="btn-link"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Details
      </a>
    </td>
    <td> </td>
    <td><span class="text-muted"><i class="fa fa-clock-o"></i> 2017-01-04</span></td>
    <td>£46.00</td>
    <td class="text-center">
      <div class="label label-table label-success">Paid</div>
    </td>
  </tr>
  <tr class="showDetails">
    <td colspan="20">
      <table id="" class="table-responsive" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Recipient</th>
            <th>Expiry</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-lg-6">
              <p class="detailCell">Three Course Italian Meal for Two with Prosecco at Michelin Recommended Mele e Pere, Soho</p>
            </td>
            <td>46.00</td>
            <td>No recipient</td>
            <td>Mar 11, 2017</td>
            <td><span class="label label-warning">Paid</span></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>


 

Answer 1

最近的不是按照你的想法做的。 它在DOM上寻找TR。那你需要NEXT tr

＆＃13;

＆＃13;

$(".btn-link").click(function() {
  $(this).closest('tr').next().toggle();
});

＆＃13;

.showDetails {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href="#" class="btn-link"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Details
      </a>
    </td>
    <td> </td>
    <td><span class="text-muted"><i class="fa fa-clock-o"></i> 2017-01-04</span></td>
    <td>£46.00</td>
    <td class="text-center">
      <div class="label label-table label-success">Paid</div>
    </td>
  </tr>
  <tr class="showDetails">
    <td colspan="20">
      <table id="" class="table-responsive" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Recipient</th>
            <th>Expiry</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-lg-6">
              <p class="detailCell">Three Course Italian Meal for Two with Prosecco at Michelin Recommended Mele e Pere, Soho</p>
            </td>
            <td>46.00</td>
            <td>No recipient</td>
            <td>Mar 11, 2017</td>
            <td><span class="label label-warning">Paid</span></td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>


 

＆＃13;

＆＃13;

＆＃13;