title: Adding array data to HTML Table
body: <p>I have a problem adding the data array into my table. There is no error message shown in the firebug and the data was not added into the table as rows using the <code>$("#tbNames tr:last").after("&lt;tr&gt;&lt;td&gt;" + data[0] + "&lt;/td&gt;&lt;td&gt;" + data[2] + "&lt;/td&gt;&lt;td&gt;&lt;img src='delete.gif' class='delete' height='15' /&gt;&lt;/td&gt;&lt;/tr&gt;");</code>. </p>
  
  <p><strong>The Logic (Javascript)</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var data = [];
  data.push("Coco", "Mandy");
  data.push("Suzze", "Candy");
  data.push("Janny", "Jacky");
  
  
  $(document).ready(function() {
       $('#btnAdd').live('click', function() {
          var name = $('#txtName').val();
          var name2 = $('#txtName2').val();
          $("#tbNames tr:last").after("&lt;tr&gt;&lt;td&gt;" + name + "&lt;/td&gt;&lt;td&gt;" + name2 + "&lt;/td&gt;&lt;td&gt;&lt;img src='delete.gif' class='delete' height='15' /&gt;&lt;/td&gt;&lt;/tr&gt;");
       });
  
       $('#tbNames td img.delete').live('click', function() {
          $(this).parent().parent().remove();
       });
  
       $("#insert_data").click(function() {
              for(var i=0; i&lt;data.length; i++){
          $("#tbNames tr:last").after("&lt;tr&gt;&lt;td&gt;" + data[0] + "&lt;/td&gt;&lt;td&gt;" + data[2] + "&lt;/td&gt;&lt;td&gt;&lt;img src='delete.gif' class='delete' height='15' /&gt;&lt;/td&gt;&lt;/tr&gt;");
          }
       });      
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>The HTML form</strong></p>
  
  <pre><code>&lt;input id="txtName" type="text" /&gt;
  &lt;input id="txtName2" type="text" /&gt;
  &lt;input id="btnAdd" type="button" value="Add" /&gt;
  &lt;table id="tbNames" border="1" &gt;
       &lt;tr&gt;
           &lt;th&gt;Name&lt;/b&gt;&lt;/th&gt;
           &lt;th&gt;Name2&lt;/b&gt;&lt;/th&gt;
           &lt;th&gt;Delete&lt;/b&gt;&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;Bingo&lt;/td&gt;
           &lt;td&gt;Tingo&lt;/td&gt;
           &lt;td&gt;&lt;img src="Delete.gif" height="15" class="delete" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input id="insert_data" type="button" style="height: 35px; width: 225px" value="Retrieve Default User" /&gt;
  </code></pre>
  
  <p>Please advise if I miss out anything. Thanks.</p>
  
  <h1><strong>The Solution</strong></h1>
  
  <p>(Will be insert into the solution text area tomorrow since I got this message <code>Users with less than 100 reputation can't answer their own question for 8 hours after asking. You may self-answer in 7 hours. Until then please use comments, or edit your question instead.</code></p>
  
  <p><strong>Bug 1</strong></p>
  
  <p>Changing the</p>
  
  <pre><code>data.push("Coco", "Mandy"); 
  data.push("Suzze", "Candy"); 
  data.push("Janny", "Jacky"); 
  </code></pre>
  
  <p>to </p>
  
  <pre><code>data.push(["Coco", "Mandy"]); 
  data.push(["Suzze", "Candy"]); 
  data.push(["Janny", "Jacky"]);
  </code></pre>
  
  <p><strong>Bug 2</strong></p>
  
  <p>Changing the </p>
  
  <pre><code>$("#insert_data").click(function() { 
     for(var i=0; i&lt;data.length; i++){ 
          $("#tbNames tr:last").after("&lt;tr&gt;&lt;td&gt;" + data[0] + "&lt;/td&gt;&lt;td&gt;" + data[2] + "&lt;/td&gt;&lt;td&gt;&lt;img src='delete.gif' class='delete' height='15' /&gt;&lt;/td&gt;&lt;/tr&gt;"); 
      } 
  }); 
  </code></pre>
  
  <p>to </p>
  
  <pre><code>$("#insert_data").click(function() { 
      for(var i=0; i&lt;data.length; i++){ 
          $("#tbNames tr:last").after("&lt;tr&gt;&lt;td&gt;" + data[i][0] + "&lt;/td&gt;&lt;td&gt;" + data[i][1] + "&lt;/td&gt;&lt;td&gt;&lt;img src='delete.gif' class='delete' height='15' /&gt;&lt;/td&gt;&lt;/tr&gt;"); 
      } 
  });
  </code></pre>