如何从模式中更新行的每一列的值?

问题描述 投票:0回答:2

我有这样的HTML代码:

<body>
<div class="container">
    <div style="margin-top: 50px;">
        <table class="table table-hover" style="width: 100%;">
            <tbody>
                <tr>
                    <th>0</th>
                    <td class="cTenSanPham">Samsung Galaxy Note 8</td>
                    <td class="cGiaSanPham">23.000.000 VND</td>
                    <td>
                        <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
                        <button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

使用模式代码

                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>
                                <h5 class="">Mã sản phẩm</h5>
                            </label>
                            <input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
                        </div>
                        <div class="form-group">
                            <label>
                                <h5 class="">Tên sản phẩm</h5>
                            </label>
                            <input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
                        </div>
                        <div class="form-group">
                            <label>
                                <h5 class="">Giá sản phẩm</h5>
                            </label>
                            <input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham"
                                name="nGiaSanPham">
                        </div>
                    </form>
                </div>

以及这样的Javascript代码:

function editProductModal() {
$(document).on("click", ".edit", function () {
    $(this).parents("tr").find("th").each(function () {
        document.getElementById("iMaSanPham").value = $(this).text();
    });

    $(this).parents("tr").find(".cTenSanPham").each(function () {
        document.getElementById("iTenSanPham").value = $(this).text();
    });

    $(this).parents("tr").find(".cGiaSanPham").each(function () {
        document.getElementById("iGiaSanPham").value = parseInt($(this).text().replace(/\D/g, ''));
    });
});

}

我想在任何行上单击按钮'Chỉnhsửa'时,一个modal将打开并将该行中的数据填充到此modal (引导程序4)。我可以在此模式上进行编辑,然后按一个按钮以将更新的数据传递到表。如何在JS文件的function editProductModal()中执行此操作。非常感谢

javascript jquery html bootstrap-modal
2个回答
0
投票

您不正确地将嵌入式onclick和jQuery click事件监听器混合在一起。


0
投票

© www.soinside.com 2019 - 2024. All rights reserved.