Adding array data to HTML Table
<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>
