laker001 laker001 - 3 months ago 7
HTML Question

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?

Answer

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