Jquery and adding row to table

Question

I have the following jquery code.

var destTable = $("#numbers");
$(document).ready(function() {
  $("#btnAdd").click(function() {
   //Take the text, and also the ddl value and insert as table row.
   var newRow = $("<tr><td>hi</td></tr>");
   $("#numbers").append(newRow);
  });
});

What I would really like is to store a reference to an element once and then use it from there on it.

The code above add's a row to my table as expected but if I use. $(destTable).append(newRow) or destTable.append(newRow) nothing happens could anyone shed any light on this for me?

Thanks

Paolo Bergantino · Accepted Answer · 2009-07-01 07:58:41Z

22

Keep the reference inside document.ready:

$(document).ready(function() {
  var destTable = $("#numbers");
  $("#btnAdd").click(function() {
   //Take the text, and also the ddl value and insert as table row.
   var newRow = $("<tr><td>hi</td></tr>");
   $("#numbers").append(newRow);
  });
});

The point of document.ready is to wait for the DOM to be ready; if you try doing $('#numbers'); outside of it (and the code does not appear after the element in the document) the DOM will not have yet created this element so you won't have a proper reference to it.

Once you do this, you should be able to do:

destTable.append(newRow);

Inside the click function. As a last note, however, it is a common and accepted practice to preface variables that represent jQuery sets with a $. So this is best:

var $destTable = $("#numbers");

answered Jul 1, 2009 at 7:58

Paolo Bergantino

490k83 gold badges523 silver badges437 bronze badges

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

1 Comment

RubbleFord Over a year ago

Makes sense when I thought about it cheers for that worked a treat.

benahm · Accepted Answer · 2018-05-18 06:52:46Z

0

Your can use appendTo like this :

$("<tr><td>Hello</td><tr>").appendTo("#MyTable > tbody")

edited May 18, 2018 at 6:52

answered Feb 17, 2013 at 14:23

benahm

2212 silver badges8 bronze badges

2 Comments

ChristopherDBerry Over a year ago

Should that not be <tr><td>Hello</td></tr> ?

benahm Over a year ago

@MadMaardigan YES! :)

Collectives™ on Stack Overflow

Jquery and adding row to table

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related