Question

我从数据库中获得了10条记录，所以我只需要单击“隐藏”按钮，那么该行将不被全部数据隐藏，但是在我的代码中，当我单击“隐藏”按钮时，所有数据都将被隐藏。这是我的代码。

$(document).ready(function() {
  $("#btn").click(function() {
    $(".hide_material").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <th>Material Name</th>
  <th>Qty/Piece</th>
  <th>Total</th>
  <th>Action</th>
</tr>
<tr class="hide_material">
  <td>
    <?php echo $row->name; ?>
  </td>
  <td>
    <?php echo $row->qty; ?>
  </td>
  <td>
    <?php echo $total; ?>
  </td>
  <td><button type="button" id="btn" style="float:right; margin-right:25px; " class="btn btn-primary btn-xs">Show/Hide</button></td>
</tr>

Answer 1

您可以使用$(this).closest(".hide_material").show();

.closest()是您的朋友，它将寻找具有类.hide_material

的第一个父元素。

由于您要隐藏包含按钮的行，因此请使用.show()而不是.toggle()

正如Pete所说，在多个元素上使用相同的ID时应格外小心，该ID应该始终是唯一的。

演示

$(document).ready(function() {
  $(".hidebtn").click(function() {
    $(this).closest(".hide_material").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Material Name</th>
      <th>Qty/Piece</th>
      <th>Total</th>
      <th>Action</th>
    </tr>
    <tr class="hide_material">
      <td>
        <?php echo $row->name; ?>
      </td>
      <td>
        <?php echo $row->qty; ?>
      </td>
      <td>
        <?php echo $total; ?>
      </td>
      <td><button type="button" style="float:right; margin-right:25px; " class="hidebtn btn btn-primary btn-xs">Show/Hide</button></td>
    </tr>
  </tbody>
</table>

Answer 2

使用以下内容：

$(document).ready(function() {
  $("#btn").click(function() {
    $(this).parent().parent().toggle();
    //Use Alternative
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <th>Material Name</th>
  <th>Qty/Piece</th>
  <th>Total</th>
  <th>Action</th>
</tr>
<tr class="hide_material">
  <td>
    sadasd
  </td>
  <td>
    dasd
  </td>
  <td>
    asdas
  </td>
  <td><button type="button" id="btn" style="float:right; margin-right:25px; " class="btn btn-primary btn-xs">Show/Hide</button></td>
</tr>

Answer 3

您可以使用$(this).closest('tr').toggle();。您还使用id作为btn来监听点击事件。您可以使用.hide_material button而不使用id值。

$(document).ready(function () {
  $(".hide_material button").click(function () {
      $(this).closest('tr').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
<tr>
    <th>Material Name</th>
    <th>Qty/Piece</th>
    <th>Total</th>
    <th>Action</th>   
</tr>
<tr class="hide_material">
 <td><?php echo $row->name; ?></td>
 <td><?php echo $row->qty; ?></td>
 <td><?php echo $total; ?></td>
 <td><button type="button" id="btn" style="float:right; margin-right:25px; " class="btn btn-primary btn-xs">Show/Hide</button></td>
</tr>
<tr class="hide_material">
 <td><?php echo $row->name; ?></td>
 <td><?php echo $row->qty; ?></td>
 <td><?php echo $total; ?></td>
 <td><button type="button" id="btn" style="float:right; margin-right:25px; " class="btn btn-primary btn-xs">Show/Hide</button></td>
</tr>
<tr class="hide_material">
 <td><?php echo $row->name; ?></td>
 <td><?php echo $row->qty; ?></td>
 <td><?php echo $total; ?></td>
 <td><button type="button" id="btn" style="float:right; margin-right:25px; " class="btn btn-primary btn-xs">Show/Hide</button></td>
</tr>
</table>

Answer 4

使用jQuery的.hide()方法将其隐藏，因为您只需要隐藏它即可。

$(document).ready(function () {
  $(".hide_material button").click(function () {
      $(this).closest('tr').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
<tr>
    <th>Material Name</th>
    <th>Qty/Piece</th>
    <th>Total</th>
    <th>Action</th>   
</tr>
<tr class="hide_material">
 <td><?php echo $row->name; ?></td>
 <td><?php echo $row->qty; ?></td>
 <td><?php echo $total; ?></td>
 <td><button type="button" style="float:right; margin-right:25px; " class="btn btn-primary btn-xs">Show/Hide</button></td>
</tr>
<tr class="hide_material">
 <td><?php echo $row->name; ?></td>
 <td><?php echo $row->qty; ?></td>
 <td><?php echo $total; ?></td>
 <td><button type="button" style="float:right; margin-right:25px; " class="btn btn-primary btn-xs">Show/Hide</button></td>
</tr>
<tr class="hide_material">
 <td><?php echo $row->name; ?></td>
 <td><?php echo $row->qty; ?></td>
 <td><?php echo $total; ?></td>
 <td><button type="button" style="float:right; margin-right:25px; " class="btn btn-primary btn-xs">Show/Hide</button></td>
</tr>
</table>

如何在jQuery中隐藏行

4 个答案: