jquery - Generate table row dynamically on AJAX success -

what i'd : when user clicks on send, want data displayed in <tr/> (with each field nested in own <td/>).

i wrote script this, system not dynamic yet.

html :

<form name="contact" method="post" action="">     <p>         <label for="name">name</label>         <input type="text" name="name" id="name" />     </p>     <p>         <label for="age">age</label>         <input type="text" name="age" id="age" />     </p>     <p>         <label for="mail">mail</label>         <input type="text" name="mail" id="mail" />     </p>     <p>         <input type="submit" name="submit" id="submit" value="send" />     </p> </form> <table id="results"></table> 

js :

$(function() {     $("#submit").click(function() {          var name = $("input#name").val();         var age = $("input#age").val();         var mail = $("input#mail").val();          var datastring = [name, age, mail];         var n = datastring.length;          $.ajax({             type: "post",             url: "process.php",             data: datastring,             success: function() {                 $('#results').append(                     $('<tr>')                         .append($('<td>').append(datastring[0]))                         .append($('<td>').append(datastring[1]))                         .append($('<td>').append(datastring[2]))                 );             }         });         return false;     }); }) 

as can see, grab fields manually datastring[x], how can make system dynamic?

i thinking of using loop following can't seem make work :

for(var = 0; < n; i++){     row += "$('<td>').append("+datastring[i]+")"; }  $('#results').append(     $('<tr>')         .append(row) ); 

any hint on how this? or have cleaner solution?

thanks !

this line of code:

row += "$('<td>').append("+datastring[i]+")"; 

isn't creating element , appending data it, it's concatenating row variable , string literal (that contains jquery code).

why not make row actual row - rather string contains contents of row - append in success callback handler instead:

var row = $('<tr>'); for(var = 0; < n; i++) {     row.append($('<td>').html(datastring[i])); } 

then:

$('#results').append(row);