Question

I have a table, has many rows. for example one of from rows(all rows are same):

<tr>
    <td>
        <input type="text" />
    </td>
    <td>
        <textarea cols="40" rows="3" ></textarea>
    </td>
    <td>
        <select>
            //options
        </select>
    </td>
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="checkbox" />
    </td>
</tr>

Rows can be dynamically added by jquery after button click. I’m trying to do:
after button click add new row(I do it) and replace previous row Html Elements(input type=text, textarea, select, input type=text, /[input type=”checkbox” must be safe]) with its own values.

And after if i click on row(anyrow), i want to rollback previous operation. i.e. replace texts with html element. and htmlElement.val()=text.

Added after 30 minutes:
I wrote for input type=text element and textarea element this.

$("#btnAdd").click(function() {
       $input = $('#mainTable tbody>tr:last').closest("tr").find("td > input:text");
       $input.replaceWith($input.val());
       $textArea = $('#mainTable tbody>tr:last').closest("tr").find("td > textarea");
       $textArea.replaceWith($textArea.val());
});

is this a good idea?

Answer 1

I am assuming something like this might work if I understood the question correctly.

Firstly, clear all click handlers from each row. Replace the last rows elements with their values. And finally add click handlers to each row to revert the values to elements again.

$('#btnAdd').click(function() {
    $('#mainTable tr').unbind('click');

    var lastRow = $('#mainTable tr:last');
    // its simpler to clone now, and just replace entire row later when needed
    var clonedRow = lastRow.clone();

    replaceWithValues(lastRow);

    $('#mainTable tr').click(function() {
        $(this).replaceWith(clonedRow);
    );
}​

Since I am guessing all the HTML elements (text, checkbox, textarea, select) have the val() function, you can ignore the type of element you are dealing with while replacing. You need some way of telling which value belonged to which type of an element though when you will be reverting these back to elements.

function replaceWithValues(row) {
    var elements = $('td > *', row);
    elements.each(function() {
        var value = $(this).val();
        $(this).replaceWith(value);
    });
}

Edit: You don’t need to individually revert each item back, just clone the entire row and replace with that.

Replace back to elements should be fairly easy too. You could add classes to each row cell to indicate which type of element goes there.

<tr>
    ...
    <td class="textField">
        <input type="text" />
    </td>
   ...

Then in the replaceWithElement function, you could select cells by type, and replace with existing value:

function replaceWithElements(row) {
    $('.textField', row).each(function() {
        var element = $("<input type='text' />").attr('value', $(this).text());
        $(this).empty().replaceWith(element);
    });
    $('.selectField') ...
    $('.textAreaField') ...
}