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?

EDIT:
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.

jayAnn, would it be possible to create a fiddle on http://jsfiddle.net -- just to clarify, what is that HTML code, is that the dynamic table? You want data from this table to go somewhere else? — Gary Green, May 16 '11 at 07:55
My browser have a problem, i think. It won't show the jsfiddle. The data from the table is for my filter. I am creating a program that will filter the data from a server and i used the table to get the field, comparison and the value. What happened in my program now is that it can filter perfectly but everytime i clicked again the searcg button, my senior want to display my previous inputted data which i used in my previous filter. So that is my problem now. I dont know how to add the previous data in the dynamic table. — jayAnn, May 16 '11 at 08:16
Very difficult to advise without seeing all the relevant (front end) code in how this system works. — Gary Green, May 16 '11 at 08:19

score 3 · Accepted Answer · edited Sep 19 '14 at 21:28

3

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/

edited Sep 19 '14 at 21:28

Egregory

218
2
9

answered May 16 '11 at 07:27

Gary Green

22,045
6
49
75

I already know how to do a dynamic table, thank you. Please see my edit. – jayAnn May 16 '11 at 07:48

score 0 · Answer 2 · answered May 16 '11 at 06:12

0

JQuery.prepend and JQuery.append will help you

answered May 16 '11 at 06:12

user748472

96
2

I know about append. My question is how to dynamically add the data to my dynamic table. I guess append is only used to add jquery element...to the end of each element in the set of matched elements. – jayAnn May 16 '11 at 06:19

Add data dynamically to a table row

2 Answers2