title: Adding rows dynamically to table using for loop in jQuery
body: <p>I want to use jQuery 1.3.2 in an html file and create a dynamic table. For this, I create the first row, then create a for loop running 10 times and in each iteration, I select the last row of the table and use <code>after()</code> to add a new row after it. This new row contains the value of the counter of my for loop.</p>
  
  <p>code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;script type="text/javascript" src="../jquery-1.3.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      $("document").ready(function() {
          for (var i = 0; i &lt; 11; i += 1) {
              var newItem = $("&lt;tr&gt;&lt;td&gt;"i"&lt;/td&gt;&lt;/tr&gt;");
              $("#table1 tr:last").after(newItem.html());
          }
      });
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table id="table1"&gt;
      &lt;tr&gt;
      &lt;td&gt;row 1 col 1&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is, only the first row that was created in <code>&lt;table&gt;&lt;/table&gt;</code> is displayed. Please help out.</p>