codeigniter JavaScript onclick编辑表单弹出窗口不工作问题

nxowjjhe  于 2023-08-01  发布在  Java
关注(0)|答案(1)|浏览(174)
<button type="button" class="btn btn-success editbtn"> EDIT </button>

<div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

        aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel"> Edit Student Data </h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <form action="updatecode.php" method="POST">

                    <div class="modal-body">

                        <input type="hidden" name="update_id" id="update_id">

                        <div class="form-group">

                            <label> First Name </label>

                            <input type="text" name="fname" id="fname" class="form-control"

                                placeholder="Enter First Name">

                        </div>

                        <div class="form-group">

                            <label> Last Name </label>

                            <input type="text" name="lname" id="lname" class="form-control"

                                placeholder="Enter Last Name">

                        </div>

                        <div class="form-group">

                            <label> Course </label>

                            <input type="text" name="course" id="course" class="form-control"

                                placeholder="Enter Course">

                        </div>

                        <div class="form-group">

                            <label> Phone Number </label>

                            <input type="text" name="contact" id="contact" class="form-control"

                                placeholder="Enter Phone Number">

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                        <button type="submit" name="updatedata" class="btn btn-primary">Update Data</button>

                    </div>

                </form>

            </div>

        </div>

    </div>

<script>

        $(document).ready(function () {

            $('.editbtn').on('click', function () {

                $('#editmodal').modal('show');

                $tr = $(this).closest('tr');

                var data = $tr.children("td").map(function () {

                    return $(this).text();

                }).get();

                console.log(data);

                $('#update_id').val(data[0]);

                $('#fname').val(data[1]);

                $('#lname').val(data[2]);

                $('#course').val(data[3]);

                $('#contact').val(data[4]);

            });

        });

    </scrip
t>

字符串
第一个代码块正在工作。但是当相同的代码应用于不同的编辑区域时,弹出窗口不会打开。

<button type="button" class="btn btn-success editbtntwo"> EDIT </button>

<div class="modal fade" id="editmodaltwo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

        aria-hidden="true">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel"> Edit Student Data </h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <form action="updatecodetwo.php" method="POST">

                    <div class="modal-body">

                        <input type="hidden" name="updatetwo_id" id="updatetwo_id">

                        <div class="form-group">

                            <label> First Name </label>

                            <input type="text" name="fnametwo" id="fnametwo" class="form-control"

                                placeholder="Enter First Name">

                        </div>

                        <div class="form-group">

                            <label> Last Name </label>

                            <input type="text" name="lnametwo" id="lnametwo" class="form-control"

                                placeholder="Enter Last Name">

                        </div>

                        <div class="form-group">

                            <label> Course </label>

                            <input type="text" name="course" id="course" class="form-control"

                                placeholder="Enter Course">

                        </div>

                        <div class="form-group">

                            <label> Phone Number </label>

                            <input type="text" name="contacttwo" id="contacttwo" class="form-control"

                                placeholder="Enter Phone Number">

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                        <button type="submit" name="updatedatatwo" class="btn btn-primary">Update Data</button>

                    </div>

                </form>

            </div>

        </div>

    </div>

<script>

        $(document).ready(function () {

            $('.editbtntwo').on('click', function () {

                $('#editmodaltwo').modal('show');

                $tr = $(this).closest('tr');

                var data = $tr.children("td").map(function () {

                    return $(this).text();

                }).get();

                console.log(data);

                $('#updatetwo_id').val(data[0]);

                $('#fnametwo').val(data[1]);

                $('#lnametwo').val(data[2]);

                $('#coursetwo').val(data[3]);

                $('#contacttwo').val(data[4]);

            });

        });

    </scrip
t>


上面的代码块可以工作。下面的代码块不起作用。两者都一样。第二个代码块的弹出窗口根本不起作用。我该怎么办?我不太懂JavaScript。我需要在第二个代码块中添加或删除什么。我在不同的应用程序中遇到了类似的错误,但我找不到解决方案。为什么第一个有用,第二个不行?

irlmq6kh

irlmq6kh1#

我猜你正在使用Bootstrap。如果是这样,你就不需要JS函数了。
尝试将以下属性添加到“编辑”按钮:

data-bs-toggle="modal" data-bs-target="#editmodal"

字符串

相关问题