Showing various images in a table HTML

Question

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

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?

@laker001 What do you mean by the javascript no longer works? Can you post your JS code? It will help! — John Roca
– John Roca, Commented Aug 17, 2016 at 8:57
Not sure what IDE you're using, but you might like to tweak the colours - it should be clear, as it is here in the question (where the src is shown in a different coliur), that you've terminated the string too soon. — fdomn-m
– fdomn-m, Commented Aug 17, 2016 at 9:17
Your image src code: <img src="iconsdb.com/icons/preview/red/delete-2-xxl.png"> needs to escape quotes like this <img src=\"iconsdb.com/icons/preview/red/delete-2-xxl.png\"> — Arathi Sreekumar
– Arathi Sreekumar, Commented Aug 17, 2016 at 9:36

pumpkinzzz · Accepted Answer · 2016-08-17 09:11:52Z

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\"

the image still does not load. could you please provide a working fiddle? Thanks!

brk · Accepted Answer · 2016-08-17 08:59:52Z

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

Although what you said is true, I don't think it will solve OP's problem

Collectives™ on Stack Overflow

Showing various images in a table HTML

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related