Question

我正在for循环中创建一个表。对于表中的每个单元格，我想显示一个按钮，当按下该按钮时，将显示具有给定信息的模式显示。

       <h2>Repairs</h2>
        <form method="POST">

        <div class="bs-example col-md-12">
            <table class="table">
                    <tr>
                        <th>Vendor</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Cost</th>
                        <th>status</th>
                        <th>Description</th>
                        <th>NHTSA Number</th>
                        <th></th>
                    </tr>

                    {% for repair in repairs %}

                        <tr>
                            <th>{{ repair.0 }}</th>
                            <th>{{ repair.1 }}</th>
                            <th>{{ repair.2 }}</th>
                            <th>${{ repair.3 }}</th>
                            <th> {{ repair.4 }}</th>  
                            <th>
                                <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myOutput{{ repair.1 }}">Description</button>
                            </th>
                            <th>{{ repair.6}} </th>
                            {% if "completed" not in repair.4 %}
                                <th><a href={{ url_for('update_repair', vin = vin, start_date = repair.1) }}>Update</a> </th>
                            {% else %}
                                <th> Status already completed</th>
                            {% endif %}
                        </tr>  
                    {% endfor %} 

            </table>
        </div>

        {% for repair in repairs %}
            <!-- Modal -->
            <div id="#myOutput{{ repair.1 }}" class="modal fade" role="dialog">
                <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>{{ repair.5 }}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

                </div>
            </div>
        {% endfor %}

这是我正在使用的CSS

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

我想我真的很亲近。但是，当我单击按钮时，实际上没有显示任何信息。但是，使用Chrome开发工具，我可以确认是否将正确的值与表格中的正确行对齐。

在Jinja模板中为循环创建模态

0 个答案: