Add data dynamically to a table row

Question

This problem is related to my previous question in this link . Now, what I'm trying to do is do the opposite thing. I have here a dynamic table (where you can add and delete rows) and whatever is the data that the user input in the latest use of table (trigger by a button) should be retrieve and be posted in the same table (if the same button is clicked).

Here's the code that I used to get the data from my dynamic table:

$('#tableSearchMainAccount1 tr').each(function(){  
var td = '';                   
   if ($(this).find("td:first").length > 0) {    // used to skip table header (if there is)            
      $(this).find('option:selected').each(function(){
         td = td + $(this).text()+ ',';
      });
   td = td + $(this).find('input').val();
   filt[ctr]=td;
   ctr += 1;           
   } 
});   
alert (filt);  //alert output like  name,equals,ann,age,equals,11

Now, what I want to do is that when I click the button again, this previous input data will be posted again in my dynamic table.

My table is something that looks like this:

<table> <tr><th>field</th><th>comparison</th><th>value</th></tr>   
 <tr>
    <td>
      <select style="width:5em;" class="field">
        <option>name</option>
        <option>age</option>
        <option>sex</option>
      </select>
    </td>
    <td>
      <select style="width:5em;" class = "comp">
        <option>equals</option>
        <option>starts with</option>
        <option>not equal to</option>
      </select>
    </td>
    <td><input type="text" class = 'value'></td>
    <td><img class="add" src="css/images/add.png" /></td> // this is used to add new row
 </tr>
</table>

The last data that a user input in the table should be displays in the table when table shows again. How do I add the data to my dynamic table?

When the button is clicked, a dialog opens which contains my dynamic table and every time a user close the dialog, all the row from that table will be gone same as the data the user entered. I already create a variable that holds the latest inputted data in the table. So when the button click again, I want the table to generate or displays the last input data by the user. The output should be the same as the latest input data.

Answer 1

Assuming you had a button id add and you wanted to add a table row onto the end:

$('#add').on('click', function() {
   var $lastTr = $('table tr:last');
   $lastTr.clone().insertAfter($lastTr);
   $('#add', $lastTr).remove();
});

Using .clone to help us clone the last row, and appending it at the end.

Fiddle: http://jsfiddle.net/garreh/w9fXJ/

---

And just to pre-empt you're next question, here's the addition of removing a row ;-)

$('.remove_row').on('click', function() {
    $(this).closest('tr').remove();
});

Fiddle: http://jsfiddle.net/garreh/w9fXJ/1/

Answer 2

JQuery. prepend and JQuery. append will help you