using Jquery, replace html elements with own values

Question

Hello, 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

Hope I understand you well. You want to insert into table pure text without the input? You could reach desired effect only with CSS (style inputs the way they'll look like text). But here is answer for your question

First of all add some ids or classes to better select desired tags. For example:

<input type="text" class="text"/>
<input type="checkbox" class="save" />

Than check if checkbox is checked (probably on an event) do:

if($('input.save:checked').val() !== null) //checkbox is checked
{
   $('input.text').each(function()  //for each text input do ...
   {
      var inputValue = $(this).val();  //get the value
      $(this).parent().html(inputValue);  //insert the value instead of input
   })
}

Answer 2

I feel uneasy with your idea of dynamically adding and deleting rows. Generally it is cleaner to treat jQuery as a modifier of the look and feel of a page, and make the actual content static.

So I'd generally prefer to have a table with all the rows you're ever going to show, perhaps with class attributes to classify them, and a jQuery plugin to show/hide selections of rows based on the context. Your problem would disappear or at least easier to analyze. It will make your code more readable and more flexible.

But this may not be an option in your case.