jQuery – Update rows in table

We have added rows dynamically through jQuery and delete particular but there should be a case of update them if we entered wrong values. To update a particular row, we need some unique value to identify the object or that complete row element.

In our previous code, change the add button text to save and on creating the person row, add an edit button also.

<td><a class="btn btn-primary" onClick="editEmployee(this)">Edit</a></td>

In this edit function we will get complete row element in a variable. By using this row element, we can extract all our row values like name, post and location and fill on the form.

function editEmployee(btn) {
    //deleteTr is a globalvariable and assign to null by default
    deleteTr = $(btn).parent().parent();
    //set values
    $('#inputName').val($(deleteTr).find('td.tdName').text());
    $('#inputPost').val($(deleteTr).find('td.tdPost').text());
    $('#inputLocation').val($(deleteTr).find('td.tdLocation').text());

}

Look out the code, we are using find function. Here find will search a td element with provided class name. While creating row html we have added class names for each td element so that we can find particular value easily in row element.

We are using same button for adding and updating the row so we have to use a condition. Remember, we declare a global variable for holding delete row element on edit button. So, in save button event if we have that button value null then we need to add that row otherwise we will replace that with out new row html. To do so we have split out our html creation code, now we creating inner html of row into a variable and add/update on basis of delete variable’s value.

$('#btnAddEmployee').click(function () {
        var name = $('#inputName').val();
        var post = $('#inputPost').val();
        var location = $('#inputLocation').val();
        // this trInnerHtml will hold only row's inner html i.e. all columns html
        var trInnerHtml = '<td class="tdName">' + name + '</td>';
        trInnerHtml += '<td class="tdPost">' + post + '</td>';
        trInnerHtml += '<td class="tdLocation">' + location + '</td>';
        trInnerHtml += '<td><a class="btn btn-primary" onClick="editEmployee(this)">Edit</a></td>';
        trInnerHtml += '<td><a class="btn btn-danger" onClick="deleteEmployee(this)">X</a></td>';

        if (deleteTr == null) {
            var employeeHtml = '<tr>';
            employeeHtml += trInnerHtml;
            employeeHtml += '</tr>';
            $('#tblEmployees').append(employeeHtml);
        }
        else
            $(deleteTr).html(trInnerHtml);            
        clearInputs();
});

To add new row we have append that tbody element and to update existing row, we have replace our column’s html with existing column’s html.

Run the application and add/update row, check some delete also. You can change the form design as per requirement.

We have dynamically add/update/delete rows in our table but what if we are getting some data from server side and then we need to perform these operations. For that it will be good to have an array variable and then perform these operations on that variable and redraw html in table.

You are thinking that it will take more time to redraw the complete array html on any operation. We will change this and we can manage some operation by the html in our next post.