Динамически генерировать строку таблицы на успехе AJAX

Question

Что бы я хотел сделать, так это: когда пользователь нажимает на отправку, я хочу, чтобы данные отображались в <tr/> (каждое поле было вложено в свой собственный <td/>).

Я уже написал сценарий, который на самом деле это делает, но система еще не динамична.

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; 
    }); 
}) 

Как вы можете видеть, я хватаю поля вручную с dataString[x], но как я могу сделать эту систему динамический?

Я думал об использовании цикла, как в следующем, но я не могу заставить его работать:

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

$('#results').append(
    $('<tr>') 
     .append(row) 
); 

любой намек о том, как это сделать? Или у вас есть более чистое решение?

Answer 1

Эта строка кода:

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

не создает элемент и добавление в нее данных, это просто конкатенации row переменной и строкового литерала (который содержит JQuery код).

Почему бы не сделать row в фактический строку - а не строка, содержащая содержимое строки - то приобщать, что в обработчике success обратного вызова вместо:

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

Тогда:

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

Answer 2

var row = '<tr>'; 
var col = ''; 
for(var i=0;i<dataString.length;i++) 
    col += '<td>'+dataString[i]+'</td>'; 
row += '</tr>'; 
$('#results').append(row); 

Answer 3

Попробуйте это, это определенно сработает.

var str ='<tr>'; 
$.each(dataString, function(i){ 
    str += '<td>' + this + '<td>'; 
} 
$('#results').append(str + '</tr>');