title: Generate table row dynamically on AJAX success
body: <p>What I'd like to do is this : when the user clicks on send, I want the data to be displayed in a <code>&lt;tr/&gt;</code> (with each field nested in its own <code>&lt;td/&gt;</code>).</p>
  
  <p>I already wrote a script that actually does this, but the system is not dynamic yet.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;form name="contact" method="post" action=""&gt;
      &lt;p&gt;
          &lt;label for="name"&gt;Name&lt;/label&gt;
          &lt;input type="text" name="name" id="name" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="age"&gt;Age&lt;/label&gt;
          &lt;input type="text" name="age" id="age" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="mail"&gt;Mail&lt;/label&gt;
          &lt;input type="text" name="mail" id="mail" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;input type="submit" name="submit" id="submit" value="Send" /&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  &lt;table id="results"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>JS :</p>
  
  <pre><code>$(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(
                      $('&lt;tr&gt;')
                          .append($('&lt;td&gt;').append(dataString[0]))
                          .append($('&lt;td&gt;').append(dataString[1]))
                          .append($('&lt;td&gt;').append(dataString[2]))
                  );
              }
          });
          return false;
      });
  })
  </code></pre>
  
  <p>As you can see, I grab the fields manually with <code>dataString[x]</code>, but how can I make this system <strong>dynamic</strong>?</p>
  
  <p>I was thinking of using a loop like the following but I can't seem to make it work :</p>
  
  <pre><code>for(var i = 0; i &lt; n; i++){
      row += "$('&lt;td&gt;').append("+dataString[i]+")";
  }
  
  $('#results').append(
      $('&lt;tr&gt;')
          .append(row)
  );
  </code></pre>
  
  <p>Any hint on how to do this? Or would you have a cleaner solution?</p>