How make the row editable when edit button is clicked using javascript?

Question

$('#dependents-info').on('click', '.btn-edit-dependent', function () {
                var currentTD = $(this).parents('tr').find('td');
                //what code will I put here?
            });

I want to make the row editable when the Edit button is clicked, how can I do that?

Answer 1

You would need to create input fields inside the td then when you want to save them use javascript to load the values and store them. So you could do

 $('#dependents-info').on('click', '.btn-edit-dependent', function () { var currentTD = $(this).parents('tr').find('td'); var newInput = currentTD.appendChild("input"); newInput.setAttribute("id","newInput1"); }); 

Answer 2

You can make the td editable by adding contenteditable="true" . See below code.

        $('#dependents-info').on('click', '.btn-edit-dependent', function () {
            var currentTD = $(this).parents('tr').find('td');
            currentTD.prop("contenteditable","true");
        });

Hope this helps.