Javascript 在表中显示更多按钮

Question

我需要在单击时显示另一个表格主体。我有以下表格，位于 foreach 中，因此会有多个按钮。:

<table class="table" id="call-table">
<tr>
    <th>Show more buttons</th>
</tr>
<tbody>
        <tr>
            <td class="show-more-button">Show more</td> //It will open first tbody
        <tr>
        <tr>
            <td class="show-more-button">Show more</td> //It will open second tbody 
        <tr>

        <tbody class="show-more"> //First tbody
            <tr>
                <th scope="col">Data</th>
                <th scope="col">Value</th>
            </tr>

            <tr>
                <td>Some data....</td>
                <td>A value..</td>
            </tr>
        </tbody>

        <tbody class="show-more"> //Second tbody
            <tr>
                <th scope="col">Data</th>
                <th scope="col">Value</th>
            </tr>

            <tr>
                <td>Some more data....</td>
                <td>Another value..</td>
            </tr>
        </tbody>

</tbody>

我正在将 python 与 DjangoFramework 一起使用。这就是我想出的剧本。但它只适用于更改 的文本，但不显示 tbody。

<script>
$(document).on("click", ".show-more-button", function() {

  if ($(this).text() == "Show more") {
    $(this).text("Show less");
    $(this).parent().children(".show-more").style.display = "block";
  } else {
    $(this).text("Show more");
    $(this).parent().children(".show-more").style.display = "block";
  } 
});
</script>

在 CSS 中:

.show-more {
  display: none;
}

我的脚本中有什么错误？

Answer 1

因为$(this).parent()将是<tr> 。例如，您可以使用 closest并找到第一个 parent table并且将能够使用.children('.show-more') 。请参阅下面的示例。

$(document).on("click", ".show-more-button", function() {
  if ($(this).text() == "Show more") {
    $(this).text("Show less");
    $(this).closest('table').children(".show-more").css('display', 'block');
  } else {
    $(this).text("Show more");
    $(this).closest('table').children(".show-more").css('display', 'none');
  } 
});

.show-more { display: none; }

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  
  <tr>
    <td class="show-more-button">Show more</td>
  <tr>
  
  <tbody class="show-more">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>27</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>Lo</td>
      <td>43</td>
    </tr>
    <tr>
      <td>Linda</td>
      <td>Morrison</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

示例已更改，我准备了新的解决方案。

$(document).on("click", ".show-more-button", function() {
  var forId = $(this).data('more-for');
  var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');

  if ($(this).text() == "Show more") {
    $(this).text("Show less");
    $showMoreElement.css('display', 'block');
  } else {
    $(this).text("Show more");
    $showMoreElement.css('display', 'none');
  } 
});

.show-more {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="call-table">
  <tr>
    <th>Show more buttons</th>
  </tr>
  
  <tbody>
    <tr>
      <!--It will open first tbody -->
      <td class="show-more-button" data-more-for="1">Show more</td>
    </tr>
    <tr>
      <!--It will open second tbody  -->
      <td class="show-more-button" data-more-for="2">Show more</td>
    </tr>
  </tbody>
  
  <!--First tbody -->
  <tbody class="show-more" data-more-id="1">
    <tr>
      <th scope="col">Data</th>
      <th scope="col">Value</th>
    </tr>
    <tr>
      <td>Some data....</td>
      <td>A value..</td>
    </tr>
  </tbody>

  <!--Second tbody-->
  <tbody class="show-more" data-more-id="2">
    <tr>
      <th scope="col">Data</th>
      <th scope="col">Value</th>
    </tr>
    <tr>
      <td>Some more data....</td>
      <td>Another value..</td>
    </tr>
  </tbody>
</table>