Jinja for 循环与侧边栏一起使用

Question

我正在尝试制作一个简单的 todo/task 跟踪器。我有一个显示所有任务及其相应信息的 table。我希望用户能够单击编辑并有一个侧边栏，其中包含一个允许用户编辑任务的表单。表单位于遍历任务的 for 循环内。但是，任何任务的侧边栏只显示第一个任务的信息。请在下面查看我的代码：

table id="myTable" class="table-auto border-collapse w-full" style="height: 100% !important;" >
      <thead>
        <tr class="rounded-lg text-sm font-medium font-normal text-gray-700 text-left" style="font-size: 0.9674rem; ">
          <th width="30%" id="th-sm" class="px-4 py-2 bg-gray-200" style="background-color:#FAFAFA;font-weight: 500;">Task Name <img style="display: inline-block; opacity: 0.5;" src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th id="th-sm" class="px-4 py-2 bg-gray-200;" style="background-color:#FAFAFA;font-weight: 500;">Status/Progress <img style="display: inline-block; opacity: 0.5;" src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th id="th-sm" class="px-4 py-2 bg-gray-200;;" style="background-color:#FAFAFA;font-weight: 500;">Due Date <img style="display: inline-block; opacity: 0.5; " src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th id="th-sm" class="px-4 py-2 bg-gray-200 " style="background-color:#FAFAFA;font-weight: 500;">Time Logged <img style="display: inline-block; opacity: 0.5;" src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th id="th-sm" class="px-4 py-2 bg-gray-200 " style="background-color:#FAFAFA;font-weight: 500;">Task Lead <img style="display: inline-block; opacity: 0.5;" src="https://img.icons8.com/material-sharp/12/000000/sort.png"/></th>
          <th width="auto" id="th-sm" class="px-4 py-2 bg-gray-200 " style="background-color:#FAFAFA;font-weight: 500;"></th>
        </tr>
      </thead>
      <tbody class="text-sm font-normal text-gray-700">
        {% for todo in update_todo %}
        <tr class="hover:bg-gray-100 border-b border-gray-200 py-10">
          <td class="px-4 py-4" style="font-size:1rem; font-weight: 600;" onclick="openNav_details()">{{todo['taskname']}}</td>

          <td class="px-4 py-4">
            <div class="relative pt-1">
              <div class="flex mb-2 items-center justify-between">
                <div>
                  <span class="text-xs inline-block text-gray-600">
                    {{todo['taskprogress']}}
                  </span>
                </div>
              </div>
              <div class="h-2 mb-4 text-xs flex rounded bg-gray-200">
                <div style="{{todo['taskprogress']}}" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gray-500"></div>
              </div>
            </div>
        </td>

          <td class="px-4 py-4">{{todo['completedate'][0:10]}}</td>
       
          <td class="px-4 py-4" >25h 18m
          </td>
        
          <td class="px-4 py-4">{{todo['assignee']}}</td>
  
          <td class="px-4 py-4">
          <div class="dropdown inline-block relative">
            <button class="text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
              <span class="mr-1"><img src="https://img.icons8.com/small/16/000000/more.png"/></span>
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
            </button>
            <ul class="dropdown-menu absolute hidden text-gray-700 pt-1 shadow-none" style="width: automatic !important;">
              <li class=""><a class="py-2 px-4 block" href="{{ url_for('main_bp.move_task', projectid=projectid, task_id=todo['id'], category='Complete') }}">Complete</a></li>
              <li class=""><a class="py-2 px-4 block" onclick="openNav()" href="#">Edit</a></li>
              <li class=""><a class="py-2 px-4 block" href="{{ url_for('main_bp.delete_task', projectid=projectid, task_id=todo['id']) }}">Delete</a></li>
            </ul>
          </div>
          <style>
            .dropdown:hover .dropdown-menu {
              display: block;
              background-color: white;
              width: 100% !important;
              color: #454545 !important;
              }
        </style>
        </td>

我的边栏表单

        <div id="mySidenav" class="sidenav2">
          <h2 onclick="closeNav_edit()">close</h2>
          <div class="modal-body">
          <form method="post" action="{{ url_for('main_bp.edit_task', projectid = projectid, task_id=todo['id']) }}">
            <div class="form-group">
              <h3>{{todo['taskname']}}</h3>
              <input style="display: none;" type="text" class="form-control" id="taskname" name="taskname" value="{{todo['taskname']}}">
              <input style="display: none;" type="text" class="form-control" id="taskname" name="taskcategory" value="{{todo['category']}}">
              <input style="display: none;" type="text" class="form-control" id="taskname" name="assignee" value="{{todo['assignee']}}">
              <hr>
            </div>
            <div class="form-group">
              <label for="completedate">Status/Progress</label>
              <select class="form-control" id="taskcategory" name="taskprogress" required>
                <option value="0%">0%</option>
                <option value="25%">25%</option>
                <option value="50%">50%</option>
                <option value="75%">75%</option>
                <option value="100%">100%</option>
              </select>
            </div>
            <div class="form-group">
              <label for="completedate">Due Date</label>
              <input required class="form-control" type="date" id="completedate" value="{{todo['completedate']}}"name="completedate">
            </div>
            <div class="form-group" style="display: none;">
              <label for="completedate">projectid</label>
              <input class="form-control" id="projectid" name="projectid" value="{{projectid}}">
            </div>
            <div class="form-group">
              <label for="taskcategory">Task Lead</label>
              <select class="form-control" id="taskcategory" name="assignee">
                <option value="{{todo['assignee']}}" disabled selected>{{todo['assignee']}}</option>
                {% for team_member in team_members %}
                <option value="{{team_member}}">{{team_member}}</option>
                {% endfor  %}
              </select>
            </div>
            <div class="form-group">
              <label for="taskcategory">Task Description</label>
              <textarea class="form-control" id="projectid" name="taskdescription" value="{{projectid}}">{{todo['taskdescription']}}</textarea>
              <script>
                tinymce.init({
                  selector: "textarea",
                  menubar : false,
                  statusbar:false,
                });
              </script>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        {% endfor %} 
      </tbody>
    </table>

我的 CSS 和 JS

<script>
           function openNav() {
            document.getElementById("mySidenav").style.width = "45%";
        }
        
        function closeNav_edit() {
            document.getElementById("mySidenav").style.width = "0";
        }
<script>
<style>
           .sidenav2 {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            right: 0;
            background-color: white;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }
        
        .sidenav2 a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }
        
        .sidenav2 a:hover, .offcanvas a:focus{
            color: #f1f1f1;
        }
        
        .sidenav2 .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        @media screen and (max-height: 450px) {
          .sidenav2 {padding-top: 15px;}
          .sidenav2 a {font-size: 18px;}
        }
         </style>

Answer 1

所以，我想通了这个问题。对于以后遇到类似问题的人。

我必须将侧边栏 ID 设置为动态 ID。我将侧边栏 ID 设为我的任务 ID。即 {{todo.id}}。我遇到了这个问题，因为 id 是一样的。这是我的固定代码：

        <div id='{{todo.id}}' class="sidenav2">
      <h2 onclick="closeNav_edit()">close</h2>
      <div class="modal-body">
      <form method="post" action="{{ url_for('main_bp.edit_task', projectid = projectid, task_id=todo['id']) }}">
        <div class="form-group">
          <h3>{{todo['taskname']}}</h3>
          <input style="display: none;" type="text" class="form-control" id="taskname" name="taskname" value="{{todo['taskname']}}">
          <input style="display: none;" type="text" class="form-control" id="taskname" name="taskcategory" value="{{todo['category']}}">
          <input style="display: none;" type="text" class="form-control" id="taskname" name="assignee" value="{{todo['assignee']}}">
          <hr>
        </div>
        <div class="form-group">
          <label for="completedate">Status/Progress</label>
          <select class="form-control" id="taskcategory" name="taskprogress" required>
            <option value="0%">0%</option>
            <option value="25%">25%</option>
            <option value="50%">50%</option>
            <option value="75%">75%</option>
            <option value="100%">100%</option>
          </select>
        </div>
        <div class="form-group">
          <label for="completedate">Due Date</label>
          <input required class="form-control" type="date" id="completedate" value="{{todo['completedate']}}"name="completedate">
        </div>
        <div class="form-group" style="display: none;">
          <label for="completedate">projectid</label>
          <input class="form-control" id="projectid" name="projectid" value="{{projectid}}">
        </div>
        <div class="form-group">
          <label for="taskcategory">Task Lead</label>
          <select class="form-control" id="taskcategory" name="assignee">
            <option value="{{todo['assignee']}}" disabled selected>{{todo['assignee']}}</option>
            {% for team_member in team_members %}
            <option value="{{team_member}}">{{team_member}}</option>
            {% endfor  %}
          </select>
        </div>
        <div class="form-group">
          <label for="taskcategory">Task Description</label>
          <textarea class="form-control" id="projectid" name="taskdescription" value="{{projectid}}">{{todo['taskdescription']}}</textarea>
          <script>
            tinymce.init({
              selector: "textarea",
              menubar : false,
              statusbar:false,
            });
          </script>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    {% endfor %} 
  </tbody>
</table>

Jinja for 循环与侧边栏一起使用

Jinja for loop acting up with sidebar

html

python

for-loop

jinja2

flask