javascriptjqueryhtml-tablerowsinline-editing

jQuery - Edit a table row inline

I have a table with arbitrary columns and rows. This fact is irrelevant though really, all I want to do is develop a function that will turn a row (or multiple rows) into a series of text inputs containing the data in the table (or empty if no data in cell).

I can't find any examples of people explicitly doing this, so I wondered what people here think is the best way to find a solution.

Solution

  • Iterate over the table cells in the rows, and replace the contents with text inputs:

    function editRow(row) {
    $('td',row).each(function() {
         $(this).html('<input type="text" value="' + $(this).html() + '" />');
    });
}

    You need to pass the relevant row/rows into the function obviously.