Edit table cell using modal with Jquery

May 15, 2024

I’ve recently been trying to learn to use Jquery. I am trying to change cells in a table using Bootstrap modal and JQuery. I have succeeded in getting data from table to modal. The problem I encountered was when I wanted to update data from modal to the table. here is my script:

    $(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');

});

when I tried it the cell did not change. can you tell me where the problem is?

>Solution :

Please don’t learn jQuery in 2024. Just do it with real javascript, you’ll be much happier and better prepared for future work if you avoid that path altogether.

To answer your question though, in your update function add a breakpoint or log the value of data to the console and you’ll see that it’s an array of strings instead of an array of DOM element references. It should just be var data = $tr.children("td"), then when using data[3] you’ll be able to set the value of that node