使用模态和 Jquery 编辑表格单元格

Question

我最近一直在尝试学习使用Jquery。我正在尝试使用 Bootstrap 模式和 JQuery 更改表中的单元格。我已经成功地将数据从表格获取到模式。我遇到的问题是当我想将数据从模态更新到表格时。这是我的脚本：

    $(document).on("click", "#edit-btn", function () {
        $('#editProductModal').modal('show');
        $tr =$(this).closest('tr');
        var data= $tr.children("td").map(function(){
            return $(this).text();
        }).get();
        $('#edit_no').val(data[0]);
        $('#edit_orderuid').val(data[1]);
        $('#edit_productname').val(data[2]);
        $('#edit_qty').val(data[3]);
        $('#edit_weight').val(data[5]);
        $('#edit_price').val(data[6]);
        $('#edit_discount').val(data[7]);
    });

//Update
$(document).on("click", "#update-product", function () {
    var data= $tr.children("td").map(function(){
        return $(this).text();
    }).get();
    $(data[3]).text($('edit_qty').val())
    $('#editProductModal').modal('hide');

});

当我尝试时，单元格没有改变。你能告诉我问题出在哪里吗？

Answer 1

请不要在 2024 年学习 jQuery。只要用真正的 javascript 来做，如果你完全避免这条路，你会更快乐，并为未来的工作做好更好的准备。

为了回答你的问题，在你的更新函数中添加一个断点或将

data

的值记录到控制台，你会看到它是一个字符串数组，而不是一个 DOM 元素引用数组。它应该只是

var data = $tr.children("td")

，然后使用

data[3]

时，您将能够设置该节点的值