手风琴表显示另一个表

Accordion table showing another table

本文关键字：另一个 显示 手风琴      更新时间：2023-09-26

我正在尝试在多个表中设置手风琴。一旦用户点击一个<tr>，另一个表将显示在底部。

HTML 

    <table class="table m-0 stocks" border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent-clickable">
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>+</td>
    </tr>
    <tr class="hidden">
      <td colspan="5">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
              <td>+</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

JS 

$(document).ready(function() {
  $("parent-clickable").click(function() {
    var text = $(this).closest("tr").find(".hidden").slideToggle(200, "linear");
  });
  console.log("Clicked");
});

JSFIDDLE

在你的代码中修复一些小的东西，HTML是好的。

$(document).ready(function() {
  $(".parent-clickable").click(function() {
    $(this).next(".hidden").slideToggle(200, "linear");
    console.log("Clicked");
  });
});

你忘记在"parent-clickable"前面添加选择器了，在这个例子中，是一个类，所以用一个点作为前缀。

在这种情况下，使用。close和。find的

似乎是多余的，因为一个。next可以帮助实现您想要的。最后，如果您不在其他地方使用它，则不需要将所有这些存储在变量中。

  $(".parent-clickable").click(function() {
    $(this).closest("tr").next(".hidden").slideToggle(200, "linear");
    console.log("Clicked");
  });
.hidden {
  display: none
}
table {
  border: 1px solid red;
}
td,
th {
  padding: 5px 10px;
}
.parent-clickable {
  background: rgba(0, 0, 0, .3);
  cursor: pointer;
  z-index: 100000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table class="table m-0 stocks" border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent-clickable">
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>+</td>
    </tr>
    <tr class="hidden">
      <td colspan="5">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
              <td>+</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

 $(".parent-clickable").on("click", function() {
   　$(this).closest("tr").next(".hidden").slideToggle(200, "linear");
   console.log("Clicked");
 });

这个怎么样?一次失踪。在parent-clickable选择器上使用next而不是find?

相关文章：