在 for 循环中使用切换

Question

在我的 Django 模板中，我从数据库中检索数据并使用 for 循环以表格格式显示它。现在，当我单击“姓名”字段时，我想显示该人的一些数据。最初，在显示时，只有表格应该是可见的，这意味着特定人的数据应该保持隐藏，当我点击那个人的名字时，应该显示关于那个人的信息。现在，我有两个问题。第一个是，当我单击任何名称时，会显示有关所有人的信息。例如，如果我的数据库中有 3 个条目，并且如果我单击任何人的姓名，则将显示有关所有 3 人的信息。我只想显示我点击的人的信息。而第二个问题是，点击名称后，数据显示在表格的最上方。我想假设我点击第二行，那么信息应该显示在第二行下方和第三行上方。

<table>
  <tr>
   <th>id</th>
   <th>Name</th>
   <th>Status</th>
  </tr>

  {% for records in obj %}
  <tr>
    <td>{{records.id}}</td>
    <td class="pop">{{records.name}}</td>
     <div class="dashboard">
                <div>
                <p>Toggled</p>
                </div>
     </div>
    <td>{{records.status}}</td>
  </tr> 
</table>

这里是切换脚本：

$(document).ready(function(){
    $(".pop").click(function(){
        $(".dashboard").toggle();
});
});

我也尝试了以下解决方案：

$(document).ready(function(){
    $(".pop").click(function(e){

        $(this).nextall(".dashboard:lt(e)").toggle();

    });
    });

但是，它没有用。

Answer 1

将你的 id pop 替换为 class

    $(function(){
        $('.pop').click(function(){
            $(this).closest('tr').siblings().toggle();
        })
    })

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

  <tr>
   <th>id</th>
   <th>Name</th>
   <th>Status</th>
   <th>Status 2</th>
  </tr>
</thead>
  <tr>
    <td>1</td>
    <td class="pop">User</td>
     <td><div class="dashboard">
                <div>
                <p>Toggled 1</p>
                </div>
     </div></td>
    <td>Active true 1</td>
  </tr> 
  <tr>
    <td>2</td>
    <td class="pop">User 2</td>
     <td><div class="dashboard">
                <div>
                <p>Toggled 2</p>
                </div>
     </div></td>
    <td>Active true 2</td>
  </tr> 
  <tr>
    <td>3</td>
    <td class="pop">User 3</td>
     <td><div class="dashboard">
                <div>
                <p>Toggled 3</p>
                </div>
     </div></td>
    <td>Active true 3</td>
  </tr> 
</table>