Adding Array Data To HTML Table

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 $('#tbNames tr:last

Solution 1:

The data arrary contains: ['Coco','Mandy','Suzze','Candy','Janny','Jacky']

So, currently your code produces:

<tr><td>Coco</td><td>Suzze</td><td><img ...etc></td></tr>
<tr><td>Coco</td><td>Suzze</td><td><img ...etc></td></tr>
<tr><td>Coco</td><td>Suzze</td><td><img  ...etc

Did you mean to write:

$("#insert_data").click(function() {
  for(var i=0; i<data.length-1; i=i+2){
    $("#tbNames tr:last").after("<tr><td>" + data[i] + "</td><td>" + data[i+1] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
    }
});

Solution 2:

Here is your solution. Spot the difference :).

$(document).ready(function() {
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("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
    });

    $('#tbNames td img.delete').live('click', function() {
        $(this).parent().parent().remove();
    });

    $("#insert_data").click(function() {
        for (var i = 0; i < data.length; i++) {
            $("#tbNames tr:last").after("<tr><td>" + data[i++] 
                 + "</td><td>" + data[i] 
                 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
        }
      });
   });
});