Javascript 需要在一个HTML页面（表格中）上显示多个模态的帮助吗_Javascript_Html_Flask

Javascript 需要在一个HTML页面（表格中）上显示多个模态的帮助吗

javascript html flask

Javascript 需要在一个HTML页面（表格中）上显示多个模态的帮助吗,javascript,html,flask,Javascript,Html,Flask,我有一个flask web应用程序和一个HTML页面，我在其中显示一个表，其中每一行都包含关于不同课程的信息。表的最后一列为每一行保存一个模式，单击该模式时，显示课程的描述（信息来自mysql数据库，存储为第[6]行）。现在，只有第一个模态（在第一行）起作用，其他模态都没有打开。我知道每一行的ID必须是唯一的，但我从来没有使用过JS，我对它不是很熟悉 <body> <a href="/main_hub_registration"

我有一个flask web应用程序和一个HTML页面，我在其中显示一个表，其中每一行都包含关于不同课程的信息。表的最后一列为每一行保存一个模式，单击该模式时，显示课程的描述（信息来自mysql数据库，存储为第[6]行）。现在，只有第一个模态（在第一行）起作用，其他模态都没有打开。我知道每一行的ID必须是唯一的，但我从来没有使用过JS，我对它不是很熟悉

<body>
       
        <a href="/main_hub_registration">
            <button type="button">Registration Main Hub</button>
        </a>
        <br>
        <table style="width:100%">
            <thead>
            <tr>
                <th>Department</th>
                <th>Course Number</th>
                <th>Title</th>
                <th>Credit Hours</th>
                <th>Prerequisite 1</th>
                <th>Prerequisite 2</th>
                <th>Course Description</th>
            </tr>
            </thead>
            <tbody>
                {% for row in table %}
                <tr>
                    <td>{{row[0]}}</td>
                    <td>{{row[1]}}</td>
                    <td>{{row[2]}}</td>
                    <td>{{row[3]}}</td>
                    <td>{{row[4]}}</td>
                    <td>{{row[5]}}</td>
                    <td>
                        
                        <!-- <input type="hidden" name="course_ID" value="{{row[8]}}"/>
                        <input type="hidden" name="course_num" value="{{row[7]}}"/> -->
                        <button id="myBtn">View Course Description</button>
                         <!-- The Modal -->
                        <div id="myModal" class="modal">

                            <!-- Modal content -->
                            <div class="modal-content">
                                <span class="close">&times;</span>
                                <p>{{row[6]}}</p>
                            </div>
                        
                        </div>
                    
                        <script>
                            // Get the modal
                            var modal = document.getElementById("myModal");
                            
                            // Get the button that opens the modal
                            var btn = document.getElementById("myBtn");
                            
                            // Get the <span> element that closes the modal
                            var span = document.getElementsByClassName("close")[0];
                            
                            // When the user clicks the button, open the modal 
                            btn.onclick = function() {
                                modal.style.display = "block";
                            }
                            
                            // When the user clicks on <span> (x), close the modal
                            span.onclick = function() {
                                modal.style.display = "none";
                            }
                            
                            // When the user clicks anywhere outside of the modal, close it
                            window.onclick = function(event) {
                                if (event.target == modal) {
                                modal.style.display = "none";
                                }
                            }
                        </script>
                
                    </td>

                </tr>
            {% endfor %}
            
            </tbody>
        </table>
    </body>




部门
课程号
标题
学时
先决条件1
先决条件2
课程描述
{表%中的行为%1}
{{行[0]}
{{行[1]}
{{行[2]}
{{行[3]}
{{行[4]}
{{row[5]}
查看课程描述
&时代；
{{row[6]}
//获取模态
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
{%endfor%}