How do you append rows to a table using jQuery

Question

Hi I was trying to add a row to a table using jQuery  but it is not working  What might be the reason   And  can I put in some value to the newly added row     Here is the code    lt html gt   lt head gt       lt script type  text javascript  src  jquery js  gt  lt  script gt       lt script type  text javascript  gt             a   click function                     myTable   childs  tr   append   lt tr class  child  gt  lt td gt blahblah lt   td gt  lt  tr gt                      lt  script gt       lt title gt  lt  title gt   lt  head gt   lt body gt       lt a href    gt Link lt  a gt       lt table id  myTable  gt           lt tbody gt               lt tr gt                   lt td gt                      test                  lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt   lt  body gt   lt  html gt

User · Answer

I always use this code below for more readable

$('table').append([
'<tr>',
    '<td>My Item 1</td>',
    '<td>My Item 2</td>',
    '<td>My Item 3</td>',
    '<td>My Item 4</td>',
'</tr>'
].join(''));

or if it have tbody

$('table').find('tbody').append([
'<tr>',
    '<td>My Item 1</td>',
    '<td>My Item 2</td>',
    '<td>My Item 3</td>',
    '<td>My Item 4</td>',
'</tr>'
].join(''));

User · Answer

Add as first row or last row in a table To add as first row in table    quot  table tbody quot   append  quot  lt tr gt  lt td gt New row lt  td gt  lt  tr gt  quot     To add as last row in table    quot  table tbody quot   prepend  quot  lt tr gt  lt td gt New row lt  td gt  lt  tr gt  quot

User · Answer

Maybe this is the answer you are looking for  It finds the last instance of  lt tr   gt  and appends the new row after it    lt script type  text javascript  gt         a   click function                 myTable tr last   after   lt tr class  child  gt  lt td gt blahblah lt   td gt  lt  tr gt              lt  script gt

User · Answer

The following code works   lt html gt   lt head gt   lt script type  text javascript  src  jquery js  gt  lt  script gt   lt script type  text javascript  gt  function AddRow             myTable   append   lt tr gt  lt td gt test 2 lt  td gt  lt  tr gt       lt  script gt   lt title gt  lt  title gt   lt  head gt   lt body gt   lt input type  button  id  btnAdd  onclick  AddRow     gt   lt a href    gt test lt  a gt   lt table id  myTable  gt     lt tbody  gt       lt tr gt         lt td gt          test        lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt   lt  body gt   lt  html gt    Note this will work as of jQuery 1 4 even if the table includes a  lt tbody gt  element      jQuery since version 1 4    automatically detects if the element you are trying to insert  using any of the append    prepend    before    or after   methods  is a  lt tr gt  and inserts it into the first  lt tbody gt  in your table or wraps it into a new  lt tbody gt  if one doesn t exist

User · Answer

I m assuming you want to add this row to the  lt tbody gt  element  and simply using append   on the  lt table gt  will insert the  lt tr gt  outside the  lt tbody gt   with perhaps undesirable results      a   click function            myTable tbody   append   lt tr class  child  gt  lt td gt blahblah lt  td gt  lt  tr gt             EDIT  Here is the complete source code  and it does indeed work   Note the   document  ready function        which was not present before    lt html gt   lt head gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  gt  lt  script gt   lt script type  text javascript  gt    document  ready function            a   click function                myTable tbody   append   lt tr class  child  gt  lt td gt blahblah lt  td gt  lt  tr gt                  lt  script gt   lt title gt  lt  title gt   lt  head gt   lt body gt   lt a href  javascript void 0    gt Link lt  a gt   lt table id  myTable  gt     lt tbody gt       lt tr gt         lt td gt test lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt   lt  body gt   lt  html gt

User · Answer

Try       myTable   append   lt tr gt  lt    escape javascript  render  partial   gt  name of partial     gt  lt  tr gt       And in the partial  you should have    lt td gt row1 lt  td gt   lt td gt row2 lt  td gt

User · Answer

You should append to the table and not the rows    lt script type  text javascript  gt     a   click function             myTable   append   lt tr class  child  gt  lt td gt blahblah lt   td gt  lt  tr gt          lt  script gt

[jquery] How do you append rows to a table using jQuery?

Examples related to jquery

Examples related to html