Question

我有一个表结构，其中的行来自于这样的数据库：

@foreach (var item in Model)
...
    <tr>
     <td>Dataset1 <button id="@(item.Id)">Show more</button></td>
    </tr>
    <tr id="@(item.Id)">
     <td>Data from Dataset1</td>  
    </tr>

所以我的表格例如是

<tr>
  <td>Dataset1 <button id="1">Show more</button></td>
</tr>
<tr id="1">
  <td>Data from Dataset1</td>
</tr>
<tr>
  <td>Dataset4 <button id="4">Show more</button></td>
</tr>
<tr id="4">
  <td>Data from Dataset4</td>
</tr>
<tr>
  <td>Dataset5 <button id="5">Show more</button></td>
</tr>
<tr id="5">
  <td>Data from Dataset5</td>
</tr>
<tr>
  <td>Dataset6 <button id="6">Show more</button></td>
</tr>
<tr id="6">
  <td>Data from Dataset6</td>
</tr>

现在，我想用jquery的相应按钮显示或隐藏不同的行。但是到目前为止我尝试过的所有方法都不起作用。甚至有可能传递ID吗？

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("id").toggle();
            });
        });
    </script>

Answer 1

id值必须在文档中必须是唯一的。 id和tr上不能有相同的button。

解决方案是：完全不使用id。在按钮上放置一个类，并使用遍历查找要切换的行。我可能还会在表上而不是每个按钮上使用委托处理程序。

$("#the-table").on("click", ".show-more", function() {
  $(this).closest("tr").next().toggle();
});

<table id="the-table">
  <tr>
    <td>Dataset1 <button class="show-more">Show more</button></td>
  </tr>
  <tr style="display: none">
    <td>Data from Dataset1</td>
  </tr>
  <tr>
    <td>Dataset4 <button class="show-more">Show more</button></td>
  </tr>
  <tr style="display: none">
    <td>Data from Dataset4</td>
  </tr>
  <tr>
    <td>Dataset5 <button class="show-more">Show more</button></td>
  </tr>
  <tr style="display: none">
    <td>Data from Dataset5</td>
  </tr>
  <tr>
    <td>Dataset6 <button class="show-more">Show more</button></td>
  </tr>
  <tr style="display: none">
    <td>Data from Dataset6</td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

（您也可以使用一个类来隐藏/显示，并且使用toggleClass而不是toggle。）

根据ID显示行

1 个答案: