Adding TD Dynamically Using jQuery

Question

I have a method that adds an image to a TD and attaches the click event to the image. I am dynamically building a row and wanted to attach the TD image column to my row.

$("<tr></tr>").append(addActionColumn($("<td></td>")));

And here is my addActionColumn method:

function addActionColumn(td) {



    var actionImage = document.createElement("img");
    $(actionImage).attr("src", "../Images/cross_red.JPG");

    // delete the row
    $(actionImage).click(function() {

        $(td).parent().remove();

     });


    $(td).append(actionImage);
}

For some reason the TR never gets the image column attached to it.

Matthew Vines · Accepted Answer · 2012-01-27 16:39:28Z

2

Your function doesn't return the td element you create.

answered Jan 27, 2012 at 16:39

Matthew Vines

27.7k7 gold badges80 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

azamsharp Over a year ago

Thanks! I am having a case of the Fridays!

Blender · Accepted Answer · 2012-01-27 16:40:33Z

1

I'd do something like this:

var td = $('<td />');
$('<img />').addClass('close-button').prop('src', '../Images/cross_red.JPG').appendTo(td);

$('<tr />').append(td).appendTo('#your_parent_element');

$('.close-button').on('click', function() {
  $(this).parent().remove();
});

answered Jan 27, 2012 at 16:40

Blender

300k55 gold badges462 silver badges511 bronze badges

Comments

musefan · Accepted Answer · 2012-01-27 16:40:34Z

1

I think it is because you are trying to .append the result of the addActionColumn which is null because you are not returning a value in the function.

try something like this at the end of the function:

return $(td);

answered Jan 27, 2012 at 16:40

musefan

48.5k21 gold badges144 silver badges193 bronze badges

Collectives™ on Stack Overflow

Adding TD Dynamically Using jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related