CODEWITHSUNDEEP
javascriptjqueryhtml
laker001
laker001

Reputation: 417

Showing various images in a table HTML

I want to load a specific image every time I add a row to a table, using this template:

LINK

However, when I add a <td> tag to the javascript code like this:

$(document).ready(function(){
     var i=1;
     $("#add_row").click(function(){
         $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control input-md'></td><td><img src="http://www.iconsdb.com/icons/preview/red/delete-2-xxl.png"></td>");
         $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
         i++; 
     });
     $("#delete_row").click(function(){
         if(i>1){
             $("#addr"+(i-1)).html('');
             i--;
         }
     });
});

The javascript no longer works, and I'm unable to add or remove rows.

How can I solve this problem?

Upvotes: 0

Views: 51

Answers (2)

pumpkinzzz
pumpkinzzz

Reputation: 2967

replace your line with this

$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><input  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control input-md'></td><td><img src=\"http://www.iconsdb.com/icons/preview/red/delete-2-xxl.png\"></td>");

more specifically the line was causing the issue was

src="http://www.iconsdb.com/icons/preview/red/delete-2-xxl.png"

you need to escape quotes like this

src=\"http://www.iconsdb.com/icons/preview/red/delete-2-xxl.png\"

Upvotes: 2

brk
brk

Reputation: 50346

I want to load a specific image every time i add a row to a table, using this template

In that case img id cannot be same. It need be unique.

Also note the img is a self closing HTML tag. You dont need to add / while closing it

Upvotes: 0

Related Questions