在 django_tables2 中创建模式弹出窗口答案

【问题标题】：Creating a modal popup in django_tables2在 django_tables2 中创建模式弹出窗口
【发布时间】：2020-11-26 01:43:44
【问题描述】：

我正在尝试添加一个在 django_tables2 中显示模式的编辑按钮。表中的第一个条目行为正确，但后续条目不会导致模式弹出。当我检查按钮时，第一个显示一个事件，而其余的则不显示。任何关于行为不重复的想法。


tables.py 
import django_tables2 as tables
from .models import expenseModel
from django_tables2 import TemplateColumn
    
class expenseTable(tables.Table):
    class Meta:
        model = expenseModel
        template_name = "django_tables2/bootstrap.html"
        fields = ('vendor', 'date', 'amount', 'category', 'description')

    edit = TemplateColumn(template_name = 'edit_button.html')

edit_button.html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
    <button id='editBtn'>Edit</button>
    <div id='myModal' class='modal'>
        <div class='modal-content'>
            <span class='close'>&times;</span>
            <p>Some Text in the modal</p>
            <form action="/summary/" method="post">
                {% csrf_token %}
                {{ form }}
                <input type="submit" value="submit">
            </form>
        </div>
    </div>
    <script>
        let modal = document.getElementById("myModal");
        let btn = document.getElementById("editBtn");
        let span = document.getElementsByClassName("close")[0];
        btn.onclick = function() {
            modal.style.display="block";
        }
        span.onclick = function() {
            modal.style.display="none";
        }
        window.onclick = function() {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>

第一个按钮显示：

第二个按钮显示：

【问题讨论】：

标签： django bootstrap-modal django-tables2

【解决方案1】：

您应该多次使用相同的 ID 值。 ID 应始终使用唯一值，例如类可以多次共享相同的值。检查https://stackoverflow.com/a/753183/4151233

【讨论】：