使用PHP和JavaScript打开NonBootstrap模态以更新/编辑表中的行

Question

我只是PHP和JavaScript的新手，所以我在w3schools中使用了示例代码并尝试对其进行改进。 我对模态有这个问题。 单击时我的模式没有打开。 第一行上只有我的编辑按钮有效，其余的无效。 这是用于从数据库填充数据的代码：

    <table>
<tbody>
                <?php
                require 'connection.php';
                $query = "SELECT first,middle,last,rfidnum,section FROM `members`";
                $result1 = mysqli_query($con, $query);?>


                    <?php while($row1 = mysqli_fetch_array($result1)):;?>
                <tr class="mems">
                    <td>
                        <?php echo $row1[0]; ?>
                    </td>
                    <td>
                        <?php echo $row1[1]; ?>
                    </td>
                    <td>
                        <?php echo $row1[2]; ?>
                    </td>
                    <td>
                        <?php echo $row1[3]; ?>
                    </td>
                    <td>
                        <?php echo $row1[4]; ?>
                    </td>
                    <td>
                        <button id='edit'>Edit</button>
                    </td>
                </tr>
                        <?php endwhile;?>


            </tbody>
</table>

<!-m2content->
        <div id="myModal2" class="modal2">   
  <div class="modal2-content bounceInDown animated">
    <span class="close2">&times;</span>
    <table>
            <thead><th>Add Member</th></thead>
        <tbody>

            <tr>
                <td></td>
                <td>
            <form method="post">
                <table>
            <tr><td>First Name</td>
            <td><input class="textboxx" type="text" name="first" onkeypress=" return forinput()" ></td></tr>
            <tr><td>Middle Name</td>
            <td><input class="textboxx" type="text" name="middle" onkeypress=" return forinput()" ></td></tr>
            <tr><td>Last Name </td>
            <td><input class="textboxx" type="text" name="last" onkeypress=" return forinput()" ></td></tr>
            <tr><td>ID Number: </td>
            <td><input class="textboxx" type="text" name="idnumber" onkeypress=" return forinput()" ></td></tr>
            <tr><td>Section: <br>
            <td><input class="textboxx" type="text" name="section" onkeypress=" return forinput()"> </td></tr>
            <tr><td><input type="submit"></td></tr>
            </table>
            </form>
                </td>
        </tr>
        </tbody>
        </table>

  </div>

这是我的Java脚本：

// Get the modal
var modal2 = document.getElementById('myModal2');

// Get the button that opens the modal
var btn2 = document.getElementById("edit");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal 
btn2.onclick = function() {
    modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
    modal2.style.display = "none";
}



window.onclick = function(event) {

    if (event.target === modal2) {
        modal2.style.display = "none";
    }
}

感谢您的回复。 由于教授的缘故，我没有使用Bootstrap。 他们告诉我们不要使用预定义的代码。 这就是为什么直到现在我仍然坚持这个问题。

Answer 1

首先，首先，您需要对“编辑”按钮的ID进行操作。 HTML不能包含具有相同ID的多个元素。 HTML元素可以具有多个唯一的ID属性吗？

假设您有一个循环，将自动生成编辑按钮的ID，并在每一行保持唯一。

<table>
    <tbody>
    <?php
        for ($i = 0; $i < 3; $i++){
            ?>
            <tr class="mems">
                <td>
                    <button id='edit_<?php echo $i; ?>'>Edit</button>
                </td>
            </tr>
            <?php
        }
    ?>
    </tbody>
</table>

由于按钮将具有不同的ID，因此按ID创建事件侦听器没有任何意义，而是可以使用类选择器或将事件直接附加到按钮本身。

将onclick事件连接到每个按钮的示例：

<button id='edit_<?php echo $i; ?>' onclick="openModal(event);">Edit</button>

使用类选择器的示例：

<button id='edit_<?php echo $i; ?>' class='editButton'>Edit</button>

请尝试以下工作示例：

<table>
    <tbody>
    <?php
        for ($i = 0; $i < 3; $i++){
            ?>
            <tr class="mems">
                <td>
                    <button id='edit_<?php echo $i; ?>' onclick="openModal(event);" class="editButton">Edit</button>
                </td>
            </tr>
            <?php
        }
    ?>
    </tbody>
</table>


<script type="text/javascript">
    for (var i = 0; i < document.getElementsByClassName('editButton').length; i++){
        var editButton = document.getElementsByClassName('editButton')[i];
        editButton.addEventListener("click", onclickByClass);
    }
    function openModal(e){
        // modal2.style.display = "block";
        alert("Click event listener from onclick attribute");
    }

    function onclickByClass(e){
        // modal2.style.display = "block";
        alert("Event listener by Class Name");
    }
</script>