admin管理员组

文章数量:1316824

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").after("<tr><td>" + data[0] + "</td><td>" + data[2] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");.

The Logic (Javascript)

<script type="text/javascript">
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[0] + "</td><td>" + data[2] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
        }
     });      
});
</script>

The HTML form

<input id="txtName" type="text" />
<input id="txtName2" type="text" />
<input id="btnAdd" type="button" value="Add" />
<table id="tbNames" border="1" >
     <tr>
         <th>Name</b></th>
         <th>Name2</b></th>
         <th>Delete</b></th>
      </tr>
      <tr>
         <td>Bingo</td>
         <td>Tingo</td>
         <td><img src="Delete.gif" height="15" class="delete" /></td>
      </tr>
</table>
<input id="insert_data" type="button" style="height: 35px; width: 225px" value="Retrieve Default User" />

Please advise if I miss out anything. Thanks.

The Solution

(Will be insert into the solution text area tomorrow since I got this message 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 ments, or edit your question instead.

Bug 1

Changing the

data.push("Coco", "Mandy"); 
data.push("Suzze", "Candy"); 
data.push("Janny", "Jacky"); 

to

data.push(["Coco", "Mandy"]); 
data.push(["Suzze", "Candy"]); 
data.push(["Janny", "Jacky"]);

Bug 2

Changing the

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

to

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

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").after("<tr><td>" + data[0] + "</td><td>" + data[2] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");.

The Logic (Javascript)

<script type="text/javascript">
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[0] + "</td><td>" + data[2] + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
        }
     });      
});
</script>

The HTML form

<input id="txtName" type="text" />
<input id="txtName2" type="text" />
<input id="btnAdd" type="button" value="Add" />
<table id="tbNames" border="1" >
     <tr>
         <th>Name</b></th>
         <th>Name2</b></th>
         <th>Delete</b></th>
      </tr>
      <tr>
         <td>Bingo</td>
         <td>Tingo</td>
         <td><img src="Delete.gif" height="15" class="delete" /></td>
      </tr>
</table>
<input id="insert_data" type="button" style="height: 35px; width: 225px" value="Retrieve Default User" />

Please advise if I miss out anything. Thanks.

The Solution

(Will be insert into the solution text area tomorrow since I got this message 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 ments, or edit your question instead.

Bug 1

Changing the

data.push("Coco", "Mandy"); 
data.push("Suzze", "Candy"); 
data.push("Janny", "Jacky"); 

to

data.push(["Coco", "Mandy"]); 
data.push(["Suzze", "Candy"]); 
data.push(["Janny", "Jacky"]);

Bug 2

Changing the

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

to

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

• javascript
• jquery

Share Improve this question Follow edited Feb 3, 2012 at 6:29 Amar Palsapure 9,68011 gold badge2929 silver badges4646 bronze badges asked Feb 3, 2012 at 5:57 JackJack 1,69355 gold badges2525 silver badges3636 bronze badges 11

• Now you are doing the reverse :) – Amar Palsapure Commented Feb 3, 2012 at 5:59
• @AmarPalsapure yep and a chance for you to increase your rep points too. :D – Jack Commented Feb 3, 2012 at 6:00
• Is this homework you are doing? or some project? – Amar Palsapure Commented Feb 3, 2012 at 6:02
• It is neither homework nor project. Just trying out how I can play around with the table and if I can extend the functionality of the table – Jack Commented Feb 3, 2012 at 6:03
• @AmarPalsapure I found the solution. There are 2 bugs in my code. – Jack Commented Feb 3, 2012 at 6:08

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 4

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>");
    }
});

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>");
        }
      });
   });
});

本文标签： javascriptAdding array data to HTML TableStack Overflow