Add table row in jQuery

Question

What is the best method in jQuery to add an additional row to a table as the last row   Is this acceptable       myTable   append   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt       Are there limitations to what you can add to a table like this  such as inputs  selects  number of rows

User · Answer

Pure JS is quite short in your case   myTable firstChild innerHTML      lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt      x000D   x000D  function add     x000D    myTable firstChild innerHTML    lt tr gt  lt td gt date lt  td gt  lt td gt    new Date  lt  td gt  lt  tr gt   x000D    x000D  td  border  1px solid black   x000D   lt button onclick  add    gt Add lt  button gt  lt br gt  x000D   lt table id  myTable  gt  lt tbody gt  lt  tbody gt   lt  table gt  x000D   x000D   x000D     if we remove  lt tbody gt  and firstChild it will also works but wrap every row with  lt tbody gt

User · Answer

What if you had a  lt tbody gt  and a  lt tfoot gt     Such as    lt table gt       lt tbody gt           lt tr gt  lt td gt Foo lt  td gt  lt  tr gt       lt  tbody gt       lt tfoot gt           lt tr gt  lt td gt footer information lt  td gt  lt  tr gt       lt  tfoot gt   lt  table gt    Then it would insert your new row in the footer - not to the body   Hence the best solution is to include a  lt tbody gt  tag and use  append  rather than  after       myTable  gt  tbody   append   lt tr gt  lt td gt row content lt  td gt  lt  tr gt

User · Answer

This is my solution      myTable   append   lt tr gt  lt td gt   data   lt  td gt  lt td gt   other data   lt  td gt     lt  tr gt

User · Answer

The approach you suggest is not guaranteed to give you the result you re looking for - what if you had a tbody for example    lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt   lt  table gt    You would end up with the following    lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt     lt tr gt     lt  tr gt   lt  table gt    I would therefore recommend this approach instead       myTable tr last   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt       You can include anything within the after   method as long as it s valid HTML  including multiple rows as per the example above   Update  Revisiting this answer following recent activity with this question  eyelidlessness makes a good comment that there will always be a tbody in the DOM  this is true  but only if there is at least one row  If you have no rows  there will be no tbody unless you have specified one yourself   DaRKoN  suggests appending to the tbody rather than adding content after the last tr  This gets around the issue of having no rows  but still isn t bulletproof as you could theoretically have multiple tbody elements and the row would get added to each of them   Weighing everything up  I m not sure there is a single one-line solution that accounts for every single possible scenario  You will need to make sure the jQuery code tallies with your markup   I think the safest solution is probably to ensure your table always includes at least one tbody in your markup  even if it has no rows  On this basis  you can use the following which will work however many rows you have  and also account for multiple tbody elements        myTable  gt  tbody last-child   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

The approach you suggest is not guaranteed to give you the result you re looking for - what if you had a tbody for example    lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt   lt  table gt    You would end up with the following    lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt     lt tr gt     lt  tr gt   lt  table gt    I would therefore recommend this approach instead       myTable tr last   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt       You can include anything within the after   method as long as it s valid HTML  including multiple rows as per the example above   Update  Revisiting this answer following recent activity with this question  eyelidlessness makes a good comment that there will always be a tbody in the DOM  this is true  but only if there is at least one row  If you have no rows  there will be no tbody unless you have specified one yourself   DaRKoN  suggests appending to the tbody rather than adding content after the last tr  This gets around the issue of having no rows  but still isn t bulletproof as you could theoretically have multiple tbody elements and the row would get added to each of them   Weighing everything up  I m not sure there is a single one-line solution that accounts for every single possible scenario  You will need to make sure the jQuery code tallies with your markup   I think the safest solution is probably to ensure your table always includes at least one tbody in your markup  even if it has no rows  On this basis  you can use the following which will work however many rows you have  and also account for multiple tbody elements        myTable  gt  tbody last-child   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

To add a good example on the topic  here is working solution if you need to add a row at specific position    The extra row is added after the 5th row  or at the end of the table if there are less then 5 rows   var ninja row       banner holder   find  tr     if      my table tbody tr   length  gt  5           my table tbody tr   filter   nth-child 5    after ninja row    else          my table tr last   after ninja row       I put the content on a ready  hidden  container below the table   so if you or the designer  have to change it is not required to edit the JS    lt table id  banner holder  style  display none   gt        lt tr gt           lt td colspan  3  gt               lt div class  wide-banner  gt  lt  div gt           lt  td gt          lt  tr gt    lt  table gt

User · Answer

If you are using Datatable JQuery plugin you can try   oTable       tblStateFeesSetup   dataTable                bScrollCollapse   true               bJQueryUI   true                                                Custom Initializations                     Data Row Template of the table  var dataRowTemplate       dataRowTemplate InvoiceID       dataRowTemplate InvoiceDate       dataRowTemplate IsOverRide   false  dataRowTemplate AmountOfInvoice       dataRowTemplate DateReceived       dataRowTemplate AmountReceived       dataRowTemplate CheckNumber          Add dataRow to the table  oTable fnAddData dataRowTemplate     Refer Datatables fnAddData Datatables API

User · Answer

The answers above are very helpful  but when student refer this link to add data from form they often require a sample    I want to contribute an sample get input from from and use  after   to insert tr to table using string interpolation   function add      let studentname      input name  studentname     val      let studentmark      input name  studentmark     val           student tr last   after   lt tr gt  lt td gt   studentname  lt  td gt  lt td gt   studentmark  lt  td gt  lt  tr gt          x000D   x000D  function add    x000D  let studentname      input name  studentname     val    x000D  let studentmark      input name  studentmark     val    x000D   x000D      student tr last   after   lt tr gt  lt td gt   studentname  lt  td gt  lt td gt   studentmark  lt  td gt  lt  tr gt     x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt style gt  x000D  table   x000D    font-family  arial  sans-serif  x000D    border-collapse  collapse  x000D    width  100   x000D    x000D   x000D  td  th   x000D    border  1px solid  dddddd  x000D    text-align  left  x000D    padding  8px  x000D    x000D   x000D  tr nth-child even    x000D    background-color   dddddd  x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt form gt  x000D   lt input type  text  name  studentname    gt  x000D   lt input type  text  name  studentmark    gt  x000D   lt input type  button  onclick  add    value  Add new    gt  x000D   lt  form gt  x000D   lt table id  student  gt  x000D     lt thead gt  x000D       lt th gt Name lt  th gt  x000D       lt th gt Mark lt  th gt  x000D     lt  thead gt  x000D   lt  table gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

myTable   append   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt       will add a new row to the first TBODY of the table  without depending of any THEAD or TFOOT present   I didn t find information from which version of jQuery  append   this behavior is present    You may try it in these examples    lt table class  t  gt   lt  -- table with THEAD  TBODY and TFOOT -- gt   lt thead gt     lt tr gt  lt th gt h1 lt  th gt  lt th gt h2 lt  th gt  lt  tr gt   lt  thead gt   lt tbody gt     lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt  tr gt   lt  tbody gt   lt tfoot gt     lt tr gt  lt th gt f1 lt  th gt  lt th gt f2 lt  th gt  lt  tr gt   lt  tfoot gt   lt  table gt  lt br gt    lt table class  t  gt   lt  -- table with two TBODYs -- gt   lt thead gt     lt tr gt  lt th gt h1 lt  th gt  lt th gt h2 lt  th gt  lt  tr gt   lt  thead gt   lt tbody gt     lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt  tr gt   lt  tbody gt   lt tbody gt     lt tr gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt  tr gt   lt  tbody gt   lt tfoot gt     lt tr gt  lt th gt f1 lt  th gt  lt th gt f2 lt  th gt  lt  tr gt   lt  tfoot gt   lt  table gt  lt br gt    lt table class  t  gt    lt  -- table without TBODY -- gt   lt thead gt     lt tr gt  lt th gt h1 lt  th gt  lt th gt h2 lt  th gt  lt  tr gt   lt  thead gt   lt  table gt  lt br gt    lt table class  t  gt    lt  -- table with TR not in TBODY  -- gt     lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt  tr gt   lt  table gt   lt br gt   lt table class  t  gt   lt  table gt    lt script gt      t   append   lt tr gt  lt td gt a lt  td gt  lt td gt a lt  td gt  lt  tr gt      lt  script gt    In which example a b row is inserted after 1 2  not after 3 4 in second example  If the table were empty  jQuery creates TBODY for a new row

User · Answer

You can use this great jQuery add table row function  It works great with tables that have  lt tbody gt  and that don t  Also it takes into the consideration the colspan of your last table row   Here is an example usage      One table addTableRow     myTable        add table row to number of tables addTableRow     myTables

User · Answer

Try this   very simple way   x000D   x000D      lt tr gt  lt td gt 3 lt  td gt  lt  tr gt  lt tr gt  lt td gt 4 lt  td gt  lt  tr gt    appendTo   myTable tbody    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   lt table id  myTable  gt  x000D     lt tbody gt  x000D       lt tr gt  lt td gt 1 lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt 2 lt  td gt  lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

I know you have asked for a jQuery method  I looked a lot and find that we can do it in a better way than using JavaScript directly by the following function  tableObject insertRow index   index is an integer that specifies the position of the row to insert  starts at 0   The value of -1 can also be used  which result in that the new row will be inserted at the last position  This parameter is required in Firefox and Opera  but it is optional in Internet Explorer  Chrome and Safari  If this parameter is omitted  insertRow   inserts a new row at the last position in Internet  Explorer and at the first position in Chrome and Safari  It will work for every acceptable structure of HTML table  The following example will insert a row in last  -1 is used as index    lt html gt       lt head gt           lt script type  quot text javascript quot  gt          function displayResult                         document getElementById  quot myTable quot   insertRow -1  innerHTML     lt td gt 1 lt  td gt  lt td gt 2 lt  td gt                       lt  script gt       lt  head gt        lt body gt                  lt table id  quot myTable quot  border  quot 1 quot  gt               lt tr gt                   lt td gt cell 1 lt  td gt                   lt td gt cell 2 lt  td gt               lt  tr gt               lt tr gt                   lt td gt cell 3 lt  td gt                   lt td gt cell 4 lt  td gt               lt  tr gt           lt  table gt           lt br   gt           lt button type  quot button quot  onclick  quot displayResult   quot  gt Insert new row lt  button gt                   lt  body gt   lt  html gt   I hope it helps

User · Answer

lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt     lt tr gt     lt  tr gt   lt  table gt    Write with a javascript function  document getElementById  myTable   insertRow -1  innerHTML     lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

Here  You can Just Click on button then you will get Output  When You Click on Add row button then one more row Added   I hope It is very helpful    lt html gt     lt head gt        lt script src                https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt        lt  script gt         lt style gt           table                margin  25px 0               width  200px                       table th  table td                padding  10px               text-align  center                       table  th  td                border  1px solid                   lt  style gt    lt  head gt     lt body gt         lt b gt Add table row in jQuery lt  b gt         lt p gt           Click on the button below to          add a row to the table       lt  p gt         lt button class  add-row  gt           Add row       lt  button gt         lt table gt            lt thead gt                lt tr gt                    lt th gt Rows lt  th gt                lt  tr gt            lt  thead gt            lt tbody gt                lt tr gt                    lt td gt This is row 0 lt  td gt                lt  tr gt            lt  tbody gt        lt  table gt         lt  -- Script to add table row -- gt       lt script gt           let rowno   1             document  ready function                       add-row   click function                       rows     lt tr gt  lt td gt This is row                          rowno     lt  td gt  lt  tr gt                     tableBody      table tbody                     tableBody append rows                    rowno                                        lt  script gt    lt  body gt    lt  html gt

User · Answer

Here  You can Just Click on button then you will get Output  When You Click on Add row button then one more row Added   I hope It is very helpful    lt html gt     lt head gt        lt script src                https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt        lt  script gt         lt style gt           table                margin  25px 0               width  200px                       table th  table td                padding  10px               text-align  center                       table  th  td                border  1px solid                   lt  style gt    lt  head gt     lt body gt         lt b gt Add table row in jQuery lt  b gt         lt p gt           Click on the button below to          add a row to the table       lt  p gt         lt button class  add-row  gt           Add row       lt  button gt         lt table gt            lt thead gt                lt tr gt                    lt th gt Rows lt  th gt                lt  tr gt            lt  thead gt            lt tbody gt                lt tr gt                    lt td gt This is row 0 lt  td gt                lt  tr gt            lt  tbody gt        lt  table gt         lt  -- Script to add table row -- gt       lt script gt           let rowno   1             document  ready function                       add-row   click function                       rows     lt tr gt  lt td gt This is row                          rowno     lt  td gt  lt  tr gt                     tableBody      table tbody                     tableBody append rows                    rowno                                        lt  script gt    lt  body gt    lt  html gt

User · Answer

For the best solution posted here  if there s a nested table on the last row  the new row will be added to the nested table instead of the main table  A quick solution  considering tables with without tbody and tables with nested tables    function add new row table  rowcontent        if    table  length  gt  0            if    table      gt  tbody   length    0    table  append   lt tbody   gt                table      gt  tr   length  gt  0      table  children  tbody last   children  tr last   append rowcontent     table  children  tbody last   append rowcontent             Usage example   add new row   myTable    lt tr gt  lt td gt my new row lt  td gt  lt  tr gt

User · Answer

lt tr id  tablerow  gt  lt  tr gt       tablerow   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

Try this   very simple way   x000D   x000D      lt tr gt  lt td gt 3 lt  td gt  lt  tr gt  lt tr gt  lt td gt 4 lt  td gt  lt  tr gt    appendTo   myTable tbody    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   lt table id  myTable  gt  x000D     lt tbody gt  x000D       lt tr gt  lt td gt 1 lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt 2 lt  td gt  lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

TIP  Inserting rows in html table via innerHTML or  html   is not valid in some browsers  similar IE9   and using  append   lt tr gt  lt  tr gt    is not good suggestion in any browser  best and fastest way is using the pure javascript codes   for combine this way with jQuery  only add new plugin similar this to jQuery     fn addRow function index  -1  add to end  or  any desired index    cellsCount  optional         if this 0  tagName toLowerCase     table   return null      var i 0  c  r   this 0  insertRow  index lt 0  index gt this 0  rows length  this 0  rows length index       for  i lt cellsCount  0 i    c   r insertCell      you can use c for set its content or etc     return   r        And now use it in whole the project similar this   var addedRow       myTable   addRow -1  add to end    2

User · Answer

I m using this way when there is not any row in the table  as well as  each row is quite complicated   style css        templateRow     display none          xxx html       lt tr id  templateRow  gt       lt  tr gt           templateRow   clone   removeAttr  id   appendTo      templateRow   parent

User · Answer

I recommend      myTable  gt  tbody first   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt        as opposed to       myTable  gt  tbody last   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt        The first and last keywords work on the first or last tag to be started  not closed  Therefore  this plays nicer with nested tables  if you don t want the nested table to be changed  but instead add to the overall table  At least  this is what I found    lt table id myTable gt     lt tbody id first gt       lt tr gt  lt td gt         lt table id myNestedTable gt           lt tbody id last gt           lt  tbody gt         lt  table gt       lt  td gt  lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

To add a good example on the topic  here is working solution if you need to add a row at specific position    The extra row is added after the 5th row  or at the end of the table if there are less then 5 rows   var ninja row       banner holder   find  tr     if      my table tbody tr   length  gt  5           my table tbody tr   filter   nth-child 5    after ninja row    else          my table tr last   after ninja row       I put the content on a ready  hidden  container below the table   so if you or the designer  have to change it is not required to edit the JS    lt table id  banner holder  style  display none   gt        lt tr gt           lt td colspan  3  gt               lt div class  wide-banner  gt  lt  div gt           lt  td gt          lt  tr gt    lt  table gt

User · Answer

I found this AddRow plugin quite useful for managing table rows  Though  Luke s solution would be the best fit if you just need to add a new row

User · Answer

if you have another variable you can access in  lt td gt  tag like that try   This way I hope it would be helpful  var table       yourTableId    var text     My Data in td   var image    your image jpg    var tr         lt tr gt           lt td gt    text    lt  td gt          lt td gt    text    lt  td gt          lt td gt            lt img src      image      alt  yourImage  gt          lt  td gt        lt  tr gt           yourTableId   append tr

User · Answer

Pure JS is quite short in your case   myTable firstChild innerHTML      lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt      x000D   x000D  function add     x000D    myTable firstChild innerHTML    lt tr gt  lt td gt date lt  td gt  lt td gt    new Date  lt  td gt  lt  tr gt   x000D    x000D  td  border  1px solid black   x000D   lt button onclick  add    gt Add lt  button gt  lt br gt  x000D   lt table id  myTable  gt  lt tbody gt  lt  tbody gt   lt  table gt  x000D   x000D   x000D     if we remove  lt tbody gt  and firstChild it will also works but wrap every row with  lt tbody gt

User · Answer

I recommend      myTable  gt  tbody first   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt        as opposed to       myTable  gt  tbody last   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt        The first and last keywords work on the first or last tag to be started  not closed  Therefore  this plays nicer with nested tables  if you don t want the nested table to be changed  but instead add to the overall table  At least  this is what I found    lt table id myTable gt     lt tbody id first gt       lt tr gt  lt td gt         lt table id myNestedTable gt           lt tbody id last gt           lt  tbody gt         lt  table gt       lt  td gt  lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

For the best solution posted here  if there s a nested table on the last row  the new row will be added to the nested table instead of the main table  A quick solution  considering tables with without tbody and tables with nested tables    function add new row table  rowcontent        if    table  length  gt  0            if    table      gt  tbody   length    0    table  append   lt tbody   gt                table      gt  tr   length  gt  0      table  children  tbody last   children  tr last   append rowcontent     table  children  tbody last   append rowcontent             Usage example   add new row   myTable    lt tr gt  lt td gt my new row lt  td gt  lt  tr gt

User · Answer

What if you had a  lt tbody gt  and a  lt tfoot gt     Such as    lt table gt       lt tbody gt           lt tr gt  lt td gt Foo lt  td gt  lt  tr gt       lt  tbody gt       lt tfoot gt           lt tr gt  lt td gt footer information lt  td gt  lt  tr gt       lt  tfoot gt   lt  table gt    Then it would insert your new row in the footer - not to the body   Hence the best solution is to include a  lt tbody gt  tag and use  append  rather than  after       myTable  gt  tbody   append   lt tr gt  lt td gt row content lt  td gt  lt  tr gt

User · Answer

I have tried the most upvoted one  but it did not work for me  but below works well      mytable tr   last   after   lt tr gt  lt td gt  lt  td gt  lt  tr gt      Which will work even there is a tobdy there

User · Answer

jQuery has a built-in facility to manipulate DOM elements on the fly   You can add anything to your table like this       tableID   find  tbody        append     lt tr gt             append     lt td gt                 append     lt img gt                     attr  src    img png                    text  Image cell                                    The     lt some-tag gt    thing in jQuery is a tag object that can have several attr attributes that can be set and get  as well as text  which represents the text between the tag here   lt tag gt text lt  tag gt    This is some pretty weird indenting  but it s easier for you to see what s going on in this example

User · Answer

I Guess i have done in my project   here it is   html   lt div class  container  gt       lt div class    row  gt       lt div class    span9  gt           lt div class    well  gt             lt    form for   replication  do  f    gt       lt table gt       lt tr gt         lt td gt             lt    f label  SR NO   gt         lt  td gt         lt td gt             lt    f text field  sr no    id   gt   txt RegionName    gt         lt  td gt       lt  tr gt       lt tr gt         lt td gt           lt    f label  Particular   gt         lt  td gt         lt td gt           lt    f text area  particular    id   gt   txt Region    gt         lt  td gt       lt  tr gt       lt tr gt         lt td gt           lt    f label  Unit   gt         lt  td gt         lt td gt           lt    f text field  unit   id   gt   txt Regio    gt         lt  td gt         lt  tr gt         lt tr gt          lt td gt            lt    f label  Required Quantity   gt         lt  td gt         lt td gt           lt    f text field  quantity   id   gt   txt Regi    gt         lt  td gt       lt  tr gt       lt tr gt       lt td gt  lt  td gt       lt td gt       lt table gt       lt tr gt  lt td gt       lt input type  button   name  add  id  btn AddToList  value  add  class  btn btn-primary    gt       lt  td gt  lt td gt  lt input type  button   name  Done  id  btn AddToList1  value  Done  class  btn btn-success    gt       lt  td gt  lt  tr gt       lt  table gt       lt  td gt       lt  tr gt       lt  table gt       lt   end   gt       lt table id  lst Regions  style  width  500px   border   2  class  table table-striped table-bordered table-condensed  gt       lt tr gt       lt td gt SR NO lt  td gt       lt td gt Item Name lt  td gt       lt td gt Particular lt  td gt       lt td gt Cost lt  td gt       lt  tr gt       lt  table gt       lt input type  button  id   submit  value  Submit Repication   class  btn btn-success    gt       lt  div gt       lt  div gt       lt  div gt   lt  div gt    js    document  ready function                  submit   prop  disabled   true           btn AddToList   click function               submit   prop  disabled   true       var val       txt RegionName   val        var val2       txt Region   val        var val3       txt Regio   val        var val4       txt Regi   val            lst Regions   append   lt tr gt  lt td gt     val     lt  td gt       lt td gt     val2     lt  td gt       lt td gt     val3     lt  td gt       lt td gt     val4     lt  td gt  lt  tr gt             txt RegionName   val     focus            txt Region   val                  txt Regio   val                  txt Regi   val              btn AddToList1   click function                   submit   prop  disabled   false  addclass  btn btn-warning

User · Answer

The approach you suggest is not guaranteed to give you the result you re looking for - what if you had a tbody for example    lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt   lt  table gt    You would end up with the following    lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt     lt tr gt     lt  tr gt   lt  table gt    I would therefore recommend this approach instead       myTable tr last   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt       You can include anything within the after   method as long as it s valid HTML  including multiple rows as per the example above   Update  Revisiting this answer following recent activity with this question  eyelidlessness makes a good comment that there will always be a tbody in the DOM  this is true  but only if there is at least one row  If you have no rows  there will be no tbody unless you have specified one yourself   DaRKoN  suggests appending to the tbody rather than adding content after the last tr  This gets around the issue of having no rows  but still isn t bulletproof as you could theoretically have multiple tbody elements and the row would get added to each of them   Weighing everything up  I m not sure there is a single one-line solution that accounts for every single possible scenario  You will need to make sure the jQuery code tallies with your markup   I think the safest solution is probably to ensure your table always includes at least one tbody in your markup  even if it has no rows  On this basis  you can use the following which will work however many rows you have  and also account for multiple tbody elements        myTable  gt  tbody last-child   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

lt table id myTable gt       lt tr gt  lt td gt  lt  td gt  lt  tr gt       lt style  height 0px   tfoot gt  lt  tfoot gt   lt  table gt      You can cache the footer variable and reduce access to DOM  Note  may be it will be better to use a fake row instead of footer    var footer       mytable tfoot   footer before   lt tr gt  lt td gt  lt  td gt  lt  tr gt

User · Answer

What if you had a  lt tbody gt  and a  lt tfoot gt     Such as    lt table gt       lt tbody gt           lt tr gt  lt td gt Foo lt  td gt  lt  tr gt       lt  tbody gt       lt tfoot gt           lt tr gt  lt td gt footer information lt  td gt  lt  tr gt       lt  tfoot gt   lt  table gt    Then it would insert your new row in the footer - not to the body   Hence the best solution is to include a  lt tbody gt  tag and use  append  rather than  after       myTable  gt  tbody   append   lt tr gt  lt td gt row content lt  td gt  lt  tr gt

User · Answer

Neil s answer is by far the best one  However things get messy really fast  My suggestion would be to use variables to store elements and append them to the DOM hierarchy   HTML   lt table id  tableID  gt       lt tbody gt       lt  tbody gt   lt  table gt    JAVASCRIPT     Reference to the table body var body       tableID   find  tbody        Create a new row element var row       lt tr gt         Create a new column element var column       lt td gt         Create a new image element var image       lt img gt     image attr  src    img png    image text  Image cell        Append the image to the column element column append image      Append the column to the row element row append column      Append the row to the table body body append row

User · Answer

So things have changed ever since  Luke Bennett answered this question  Here is an update   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    So yes your example code is acceptable and will work fine with jQuery 1 4           myTable   append   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt

User · Answer

In my opinion the fastest and clear way is   Try to get tbody first with jquery children  works faster  var tbody       myTable   children  tbody       Then if no tbody just select your table  var table   tbody length   tbody       myTable       Add row table append   lt tr gt  lt td gt hello gt  lt  td gt  lt  tr gt      here is demo  Fiddle Also I can recommend a small function to make more html changes   Compose template string String prototype compose    function     var re                g  return function  o           return this replace re  function     k               return typeof o k      undefined    o k                                 If you use my string composer you can do this like var tbody       myTable   children  tbody    var table   tbody length   tbody       myTable    var row     lt tr gt          lt td gt   id   lt  td gt          lt td gt   name   lt  td gt          lt td gt   phone   lt  td gt      lt  tr gt        Add row table append row compose        id   3       name    Lee        phone    123 456 789        Here is demo Fiddle

User · Answer

You can use this great jQuery add table row function  It works great with tables that have  lt tbody gt  and that don t  Also it takes into the consideration the colspan of your last table row   Here is an example usage      One table addTableRow     myTable        add table row to number of tables addTableRow     myTables

User · Answer

The answers above are very helpful  but when student refer this link to add data from form they often require a sample    I want to contribute an sample get input from from and use  after   to insert tr to table using string interpolation   function add      let studentname      input name  studentname     val      let studentmark      input name  studentmark     val           student tr last   after   lt tr gt  lt td gt   studentname  lt  td gt  lt td gt   studentmark  lt  td gt  lt  tr gt          x000D   x000D  function add    x000D  let studentname      input name  studentname     val    x000D  let studentmark      input name  studentmark     val    x000D   x000D      student tr last   after   lt tr gt  lt td gt   studentname  lt  td gt  lt td gt   studentmark  lt  td gt  lt  tr gt     x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt style gt  x000D  table   x000D    font-family  arial  sans-serif  x000D    border-collapse  collapse  x000D    width  100   x000D    x000D   x000D  td  th   x000D    border  1px solid  dddddd  x000D    text-align  left  x000D    padding  8px  x000D    x000D   x000D  tr nth-child even    x000D    background-color   dddddd  x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt form gt  x000D   lt input type  text  name  studentname    gt  x000D   lt input type  text  name  studentmark    gt  x000D   lt input type  button  onclick  add    value  Add new    gt  x000D   lt  form gt  x000D   lt table id  student  gt  x000D     lt thead gt  x000D       lt th gt Name lt  th gt  x000D       lt th gt Mark lt  th gt  x000D     lt  thead gt  x000D   lt  table gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I have tried the most upvoted one  but it did not work for me  but below works well      mytable tr   last   after   lt tr gt  lt td gt  lt  td gt  lt  tr gt      Which will work even there is a tobdy there

User · Answer

To add a new row at the last of current row  you can use like this      yourtableid tr last   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt       You can append multiple row as above  Also you can add inner data as like      yourtableid tr last   after   lt tr gt  lt td gt your data lt  td gt  lt  tr gt       in another way you can do like this  let table   document getElementById  tableId     let row   table insertRow 1      pass position where you want to add a new row     then add cells as you want with index let cell0   row insertCell 0   let cell1   row insertCell 1   let cell2   row insertCell 2   let cell3   row insertCell 3       add value to added td cell  cell0 innerHTML    your td content here    cell1 innerHTML    your td content here    cell2 innerHTML    your td content here    cell3 innerHTML    your td content here

User · Answer

Add tabe row using JQuery   if you want to add row after last of table s row child  you can try this      myTable tr last   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt       if you want to add row 1st of table s row child  you can try this      myTable tr   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

Create a row and append to table     var row       lt tr   gt                 appendTo   table id            Add columns to the row   lt td gt  properties can be given in the JSON         lt td   gt               text    column1         appendTo row            lt td   gt               text    column2            style    min-width 100px          appendTo row

User · Answer

The approach you suggest is not guaranteed to give you the result you re looking for - what if you had a tbody for example    lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt   lt  table gt    You would end up with the following    lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt     lt tr gt     lt  tr gt   lt  table gt    I would therefore recommend this approach instead       myTable tr last   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt       You can include anything within the after   method as long as it s valid HTML  including multiple rows as per the example above   Update  Revisiting this answer following recent activity with this question  eyelidlessness makes a good comment that there will always be a tbody in the DOM  this is true  but only if there is at least one row  If you have no rows  there will be no tbody unless you have specified one yourself   DaRKoN  suggests appending to the tbody rather than adding content after the last tr  This gets around the issue of having no rows  but still isn t bulletproof as you could theoretically have multiple tbody elements and the row would get added to each of them   Weighing everything up  I m not sure there is a single one-line solution that accounts for every single possible scenario  You will need to make sure the jQuery code tallies with your markup   I think the safest solution is probably to ensure your table always includes at least one tbody in your markup  even if it has no rows  On this basis  you can use the following which will work however many rows you have  and also account for multiple tbody elements        myTable  gt  tbody last-child   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

Add tabe row using JQuery   if you want to add row after last of table s row child  you can try this      myTable tr last   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt       if you want to add row 1st of table s row child  you can try this      myTable tr   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

As i have also got a way too add row at last or any specific place so i think i should also share this   First find out the length or rows   var r     content table   length    and then use below code to add your row       table id   eq r-1  after row html

User · Answer

If you want to add row before the  lt tr gt  first child       myTable  gt  tbody   prepend   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt       If you want to add row after the  lt tr gt  last child       myTable  gt  tbody   append   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt

User · Answer

I Guess i have done in my project   here it is   html   lt div class  container  gt       lt div class    row  gt       lt div class    span9  gt           lt div class    well  gt             lt    form for   replication  do  f    gt       lt table gt       lt tr gt         lt td gt             lt    f label  SR NO   gt         lt  td gt         lt td gt             lt    f text field  sr no    id   gt   txt RegionName    gt         lt  td gt       lt  tr gt       lt tr gt         lt td gt           lt    f label  Particular   gt         lt  td gt         lt td gt           lt    f text area  particular    id   gt   txt Region    gt         lt  td gt       lt  tr gt       lt tr gt         lt td gt           lt    f label  Unit   gt         lt  td gt         lt td gt           lt    f text field  unit   id   gt   txt Regio    gt         lt  td gt         lt  tr gt         lt tr gt          lt td gt            lt    f label  Required Quantity   gt         lt  td gt         lt td gt           lt    f text field  quantity   id   gt   txt Regi    gt         lt  td gt       lt  tr gt       lt tr gt       lt td gt  lt  td gt       lt td gt       lt table gt       lt tr gt  lt td gt       lt input type  button   name  add  id  btn AddToList  value  add  class  btn btn-primary    gt       lt  td gt  lt td gt  lt input type  button   name  Done  id  btn AddToList1  value  Done  class  btn btn-success    gt       lt  td gt  lt  tr gt       lt  table gt       lt  td gt       lt  tr gt       lt  table gt       lt   end   gt       lt table id  lst Regions  style  width  500px   border   2  class  table table-striped table-bordered table-condensed  gt       lt tr gt       lt td gt SR NO lt  td gt       lt td gt Item Name lt  td gt       lt td gt Particular lt  td gt       lt td gt Cost lt  td gt       lt  tr gt       lt  table gt       lt input type  button  id   submit  value  Submit Repication   class  btn btn-success    gt       lt  div gt       lt  div gt       lt  div gt   lt  div gt    js    document  ready function                  submit   prop  disabled   true           btn AddToList   click function               submit   prop  disabled   true       var val       txt RegionName   val        var val2       txt Region   val        var val3       txt Regio   val        var val4       txt Regi   val            lst Regions   append   lt tr gt  lt td gt     val     lt  td gt       lt td gt     val2     lt  td gt       lt td gt     val3     lt  td gt       lt td gt     val4     lt  td gt  lt  tr gt             txt RegionName   val     focus            txt Region   val                  txt Regio   val                  txt Regi   val              btn AddToList1   click function                   submit   prop  disabled   false  addclass  btn btn-warning

User · Answer

In a simple way       yourTableId   append   lt tr gt  lt td gt your data1 lt  td gt  lt td gt your data2 lt  td gt  lt td gt your data3 lt  td gt  lt  tr gt

User · Answer

I solved it this way   Using jquery      tab   append     lt tr gt         append     lt td gt    append  text1         append     lt td gt    append  text2         append     lt td gt    append  text3         append     lt td gt    append  text4            Snippet   x000D   x000D      tab   append     lt tr gt    x000D     append     lt td gt    append  text1    x000D     append     lt td gt    append  text2    x000D     append     lt td gt    append  text3    x000D     append     lt td gt    append  text4    x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt table id  tab  gt  x000D     lt tr gt  x000D       lt th gt Firstname lt  th gt  x000D       lt th gt Lastname lt  th gt   x000D       lt th gt Age lt  th gt  x000D       lt th gt City lt  th gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Jill lt  td gt  x000D       lt td gt Smith lt  td gt   x000D       lt td gt 50 lt  td gt  x000D       lt td gt New York lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Here is some hacketi hack code  I wanted to maintain a row template in an HTML page  Table rows 0   n are rendered at request time  and this example has one hardcoded row and a simplified template row  The template table is hidden  and the row tag must be within a valid table or browsers may drop it from the DOM tree  Adding a row uses counter 1 identifier  and the current value is maintained in the data attribute  It guarantees each row gets unique URL parameters   I have run tests on Internet nbsp Explorer nbsp 8  Internet nbsp Explorer nbsp 9  Firefox  Chrome  Opera  Nokia Lumia 800  Nokia C7  with Symbian 3   Android stock and Firefox beta browsers    lt table id  properties  gt   lt tbody gt     lt tr gt       lt th gt Name lt  th gt       lt th gt Value lt  th gt       lt th gt  amp nbsp  lt  th gt     lt  tr gt     lt tr gt       lt td nowrap gt key1 lt  td gt       lt td gt  lt input type  text  name  property key1  value  value1  size  70   gt  lt  td gt       lt td class  data item options  gt          lt a class  buttonicon  href  javascript deleteRow    title  Delete row  onClick  deleteRow this   return false   gt  lt  a gt       lt  td gt     lt  tr gt   lt  tbody gt   lt  table gt    lt table id  properties rowtemplate  style  display none  data-counter  0  gt   lt tr gt    lt td gt  lt input type  text  name  newproperty name    counter   value    size  35   gt  lt  td gt    lt td gt  lt input type  text  name  newproperty value    counter   value    size  70   gt  lt  td gt    lt td gt  lt a class  buttonicon  href  javascript deleteRow    title  Delete row  onClick  deleteRow this   return false   gt  lt  a gt  lt  td gt   lt  tr gt   lt  table gt   lt a class  action  href  javascript addRow    onclick  addRow  properties    return false  title  Add new row  gt Add row lt  a gt  lt br  gt   lt br  gt   - - - -     add row to html table  read html from row template function addRow sTableId           find destination and template tables  find first  lt tr gt         in template  Wrap inner html around  lt tr gt  tags         Keep track of counter to give unique field names      var table          sTableId       var template         sTableId   rowtemplate        var htmlCode     lt tr gt   template find  tr first   html     lt  tr gt        var id   parseInt template data  counter   10  1      template data  counter   id       htmlCode   htmlCode replace     counter  g  id       table find  tbody last   append htmlCode         delete  lt TR gt  row  childElem is any element inside row function deleteRow childElem        var row     childElem  closest  tr       find  lt tr gt  parent     row remove        PS  I give all credits to the jQuery team  they deserve everything  JavaScript programming without jQuery - I don t even want think about that nightmare

User · Answer

I solved it this way   Using jquery      tab   append     lt tr gt         append     lt td gt    append  text1         append     lt td gt    append  text2         append     lt td gt    append  text3         append     lt td gt    append  text4            Snippet   x000D   x000D      tab   append     lt tr gt    x000D     append     lt td gt    append  text1    x000D     append     lt td gt    append  text2    x000D     append     lt td gt    append  text3    x000D     append     lt td gt    append  text4    x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt table id  tab  gt  x000D     lt tr gt  x000D       lt th gt Firstname lt  th gt  x000D       lt th gt Lastname lt  th gt   x000D       lt th gt Age lt  th gt  x000D       lt th gt City lt  th gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt Jill lt  td gt  x000D       lt td gt Smith lt  td gt   x000D       lt td gt 50 lt  td gt  x000D       lt td gt New York lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

In a simple way       yourTableId   append   lt tr gt  lt td gt your data1 lt  td gt  lt td gt your data2 lt  td gt  lt td gt your data3 lt  td gt  lt  tr gt

User · Answer

If you want to add row before the  lt tr gt  first child       myTable  gt  tbody   prepend   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt       If you want to add row after the  lt tr gt  last child       myTable  gt  tbody   append   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt

User · Answer

This can be done easily using the  last    function of jQuery       tableId   last   append   lt tr gt  lt td gt New row lt  td gt  lt  tr gt

User · Answer

I m using this way when there is not any row in the table  as well as  each row is quite complicated   style css        templateRow     display none          xxx html       lt tr id  templateRow  gt       lt  tr gt           templateRow   clone   removeAttr  id   appendTo      templateRow   parent

User · Answer

myTable   append   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt       will add a new row to the first TBODY of the table  without depending of any THEAD or TFOOT present   I didn t find information from which version of jQuery  append   this behavior is present    You may try it in these examples    lt table class  t  gt   lt  -- table with THEAD  TBODY and TFOOT -- gt   lt thead gt     lt tr gt  lt th gt h1 lt  th gt  lt th gt h2 lt  th gt  lt  tr gt   lt  thead gt   lt tbody gt     lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt  tr gt   lt  tbody gt   lt tfoot gt     lt tr gt  lt th gt f1 lt  th gt  lt th gt f2 lt  th gt  lt  tr gt   lt  tfoot gt   lt  table gt  lt br gt    lt table class  t  gt   lt  -- table with two TBODYs -- gt   lt thead gt     lt tr gt  lt th gt h1 lt  th gt  lt th gt h2 lt  th gt  lt  tr gt   lt  thead gt   lt tbody gt     lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt  tr gt   lt  tbody gt   lt tbody gt     lt tr gt  lt td gt 3 lt  td gt  lt td gt 4 lt  td gt  lt  tr gt   lt  tbody gt   lt tfoot gt     lt tr gt  lt th gt f1 lt  th gt  lt th gt f2 lt  th gt  lt  tr gt   lt  tfoot gt   lt  table gt  lt br gt    lt table class  t  gt    lt  -- table without TBODY -- gt   lt thead gt     lt tr gt  lt th gt h1 lt  th gt  lt th gt h2 lt  th gt  lt  tr gt   lt  thead gt   lt  table gt  lt br gt    lt table class  t  gt    lt  -- table with TR not in TBODY  -- gt     lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt  tr gt   lt  table gt   lt br gt   lt table class  t  gt   lt  table gt    lt script gt      t   append   lt tr gt  lt td gt a lt  td gt  lt td gt a lt  td gt  lt  tr gt      lt  script gt    In which example a b row is inserted after 1 2  not after 3 4 in second example  If the table were empty  jQuery creates TBODY for a new row

User · Answer

jQuery has a built-in facility to manipulate DOM elements on the fly   You can add anything to your table like this       tableID   find  tbody        append     lt tr gt             append     lt td gt                 append     lt img gt                     attr  src    img png                    text  Image cell                                    The     lt some-tag gt    thing in jQuery is a tag object that can have several attr attributes that can be set and get  as well as text  which represents the text between the tag here   lt tag gt text lt  tag gt    This is some pretty weird indenting  but it s easier for you to see what s going on in this example

User · Answer

As i have also got a way too add row at last or any specific place so i think i should also share this   First find out the length or rows   var r     content table   length    and then use below code to add your row       table id   eq r-1  after row html

User · Answer

I was having some related issues  trying to insert a table row after the clicked row  All is fine except the  after   call does not work for the last row       traffic tbody   find  tr trafficBody  filter   nth-child      column   1         after insertedhtml     I landed up with a very untidy solution   create the table as follows  id for each row     lt tr id  row1  gt       lt  tr gt   lt tr id  row2  gt       lt  tr gt   lt tr id  row3  gt       lt  tr gt    etc      and then        traffic tbody   find  tr trafficBody    idx  after html

User · Answer

Create a row and append to table     var row       lt tr   gt                 appendTo   table id            Add columns to the row   lt td gt  properties can be given in the JSON         lt td   gt               text    column1         appendTo row            lt td   gt               text    column2            style    min-width 100px          appendTo row

User · Answer

I know you have asked for a jQuery method  I looked a lot and find that we can do it in a better way than using JavaScript directly by the following function  tableObject insertRow index   index is an integer that specifies the position of the row to insert  starts at 0   The value of -1 can also be used  which result in that the new row will be inserted at the last position  This parameter is required in Firefox and Opera  but it is optional in Internet Explorer  Chrome and Safari  If this parameter is omitted  insertRow   inserts a new row at the last position in Internet  Explorer and at the first position in Chrome and Safari  It will work for every acceptable structure of HTML table  The following example will insert a row in last  -1 is used as index    lt html gt       lt head gt           lt script type  quot text javascript quot  gt          function displayResult                         document getElementById  quot myTable quot   insertRow -1  innerHTML     lt td gt 1 lt  td gt  lt td gt 2 lt  td gt                       lt  script gt       lt  head gt        lt body gt                  lt table id  quot myTable quot  border  quot 1 quot  gt               lt tr gt                   lt td gt cell 1 lt  td gt                   lt td gt cell 2 lt  td gt               lt  tr gt               lt tr gt                   lt td gt cell 3 lt  td gt                   lt td gt cell 4 lt  td gt               lt  tr gt           lt  table gt           lt br   gt           lt button type  quot button quot  onclick  quot displayResult   quot  gt Insert new row lt  button gt                   lt  body gt   lt  html gt   I hope it helps

User · Answer

In my opinion the fastest and clear way is   Try to get tbody first with jquery children  works faster  var tbody       myTable   children  tbody       Then if no tbody just select your table  var table   tbody length   tbody       myTable       Add row table append   lt tr gt  lt td gt hello gt  lt  td gt  lt  tr gt      here is demo  Fiddle Also I can recommend a small function to make more html changes   Compose template string String prototype compose    function     var re                g  return function  o           return this replace re  function     k               return typeof o k      undefined    o k                                 If you use my string composer you can do this like var tbody       myTable   children  tbody    var table   tbody length   tbody       myTable    var row     lt tr gt          lt td gt   id   lt  td gt          lt td gt   name   lt  td gt          lt td gt   phone   lt  td gt      lt  tr gt        Add row table append row compose        id   3       name    Lee        phone    123 456 789        Here is demo Fiddle

User · Answer

I was having some related issues  trying to insert a table row after the clicked row  All is fine except the  after   call does not work for the last row       traffic tbody   find  tr trafficBody  filter   nth-child      column   1         after insertedhtml     I landed up with a very untidy solution   create the table as follows  id for each row     lt tr id  row1  gt       lt  tr gt   lt tr id  row2  gt       lt  tr gt   lt tr id  row3  gt       lt  tr gt    etc      and then        traffic tbody   find  tr trafficBody    idx  after html

User · Answer

This can be done easily using the  last    function of jQuery       tableId   last   append   lt tr gt  lt td gt New row lt  td gt  lt  tr gt

User · Answer

lt table id myTable gt       lt tr gt  lt td gt  lt  td gt  lt  tr gt       lt style  height 0px   tfoot gt  lt  tfoot gt   lt  table gt      You can cache the footer variable and reduce access to DOM  Note  may be it will be better to use a fake row instead of footer    var footer       mytable tfoot   footer before   lt tr gt  lt td gt  lt  td gt  lt  tr gt

User · Answer

TIP  Inserting rows in html table via innerHTML or  html   is not valid in some browsers  similar IE9   and using  append   lt tr gt  lt  tr gt    is not good suggestion in any browser  best and fastest way is using the pure javascript codes   for combine this way with jQuery  only add new plugin similar this to jQuery     fn addRow function index  -1  add to end  or  any desired index    cellsCount  optional         if this 0  tagName toLowerCase     table   return null      var i 0  c  r   this 0  insertRow  index lt 0  index gt this 0  rows length  this 0  rows length index       for  i lt cellsCount  0 i    c   r insertCell      you can use c for set its content or etc     return   r        And now use it in whole the project similar this   var addedRow       myTable   addRow -1  add to end    2

User · Answer

Daryl  You can append it to the tbody using the appendTo method like this         gt          quot  lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt  quot   appendTo  quot tbody quot         You ll probably want to use the latest JQuery and ECMAScript  Then you can use a back-end language to add your data to the table  You can also wrap it in a variable like so         gt      var t data       lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt       t data appendTo  tbody

User · Answer

So things have changed ever since  Luke Bennett answered this question  Here is an update   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    So yes your example code is acceptable and will work fine with jQuery 1 4           myTable   append   lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt

User · Answer

Daryl  You can append it to the tbody using the appendTo method like this         gt          quot  lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt  quot   appendTo  quot tbody quot         You ll probably want to use the latest JQuery and ECMAScript  Then you can use a back-end language to add your data to the table  You can also wrap it in a variable like so         gt      var t data       lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt       t data appendTo  tbody

User · Answer

lt table id  myTable  gt     lt tbody gt       lt tr gt     lt  tr gt       lt tr gt     lt  tr gt     lt  tbody gt     lt tr gt     lt  tr gt   lt  table gt    Write with a javascript function  document getElementById  myTable   insertRow -1  innerHTML     lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

if you have another variable you can access in  lt td gt  tag like that try   This way I hope it would be helpful  var table       yourTableId    var text     My Data in td   var image    your image jpg    var tr         lt tr gt           lt td gt    text    lt  td gt          lt td gt    text    lt  td gt          lt td gt            lt img src      image      alt  yourImage  gt          lt  td gt        lt  tr gt           yourTableId   append tr

User · Answer

My solution     Adds a new table row   fn addNewRow   function  rowId          this  find  tbody   append   lt tr id      rowId      gt   lt  tr gt          usage       Table   addNewRow id1

User · Answer

If you are using Datatable JQuery plugin you can try   oTable       tblStateFeesSetup   dataTable                bScrollCollapse   true               bJQueryUI   true                                                Custom Initializations                     Data Row Template of the table  var dataRowTemplate       dataRowTemplate InvoiceID       dataRowTemplate InvoiceDate       dataRowTemplate IsOverRide   false  dataRowTemplate AmountOfInvoice       dataRowTemplate DateReceived       dataRowTemplate AmountReceived       dataRowTemplate CheckNumber          Add dataRow to the table  oTable fnAddData dataRowTemplate     Refer Datatables fnAddData Datatables API

User · Answer

I found this AddRow plugin quite useful for managing table rows  Though  Luke s solution would be the best fit if you just need to add a new row

User · Answer

To add a new row at the last of current row  you can use like this      yourtableid tr last   after   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt       You can append multiple row as above  Also you can add inner data as like      yourtableid tr last   after   lt tr gt  lt td gt your data lt  td gt  lt  tr gt       in another way you can do like this  let table   document getElementById  tableId     let row   table insertRow 1      pass position where you want to add a new row     then add cells as you want with index let cell0   row insertCell 0   let cell1   row insertCell 1   let cell2   row insertCell 2   let cell3   row insertCell 3       add value to added td cell  cell0 innerHTML    your td content here    cell1 innerHTML    your td content here    cell2 innerHTML    your td content here    cell3 innerHTML    your td content here

User · Answer

This could also be done        myTable  gt  tbody   html     myTable  gt  tbody   html     lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt

User · Answer

What if you had a  lt tbody gt  and a  lt tfoot gt     Such as    lt table gt       lt tbody gt           lt tr gt  lt td gt Foo lt  td gt  lt  tr gt       lt  tbody gt       lt tfoot gt           lt tr gt  lt td gt footer information lt  td gt  lt  tr gt       lt  tfoot gt   lt  table gt    Then it would insert your new row in the footer - not to the body   Hence the best solution is to include a  lt tbody gt  tag and use  append  rather than  after       myTable  gt  tbody   append   lt tr gt  lt td gt row content lt  td gt  lt  tr gt

User · Answer

Neil s answer is by far the best one  However things get messy really fast  My suggestion would be to use variables to store elements and append them to the DOM hierarchy   HTML   lt table id  tableID  gt       lt tbody gt       lt  tbody gt   lt  table gt    JAVASCRIPT     Reference to the table body var body       tableID   find  tbody        Create a new row element var row       lt tr gt         Create a new column element var column       lt td gt         Create a new image element var image       lt img gt     image attr  src    img png    image text  Image cell        Append the image to the column element column append image      Append the column to the row element row append column      Append the row to the table body body append row

User · Answer

My solution     Adds a new table row   fn addNewRow   function  rowId          this  find  tbody   append   lt tr id      rowId      gt   lt  tr gt          usage       Table   addNewRow id1

User · Answer

This could also be done        myTable  gt  tbody   html     myTable  gt  tbody   html     lt tr gt  lt td gt my data lt  td gt  lt td gt more data lt  td gt  lt  tr gt

User · Answer

lt tr id  tablerow  gt  lt  tr gt       tablerow   append   lt tr gt     lt  tr gt  lt tr gt     lt  tr gt

User · Answer

This is my solution      myTable   append   lt tr gt  lt td gt   data   lt  td gt  lt td gt   other data   lt  td gt     lt  tr gt

User · Answer

Here is some hacketi hack code  I wanted to maintain a row template in an HTML page  Table rows 0   n are rendered at request time  and this example has one hardcoded row and a simplified template row  The template table is hidden  and the row tag must be within a valid table or browsers may drop it from the DOM tree  Adding a row uses counter 1 identifier  and the current value is maintained in the data attribute  It guarantees each row gets unique URL parameters   I have run tests on Internet nbsp Explorer nbsp 8  Internet nbsp Explorer nbsp 9  Firefox  Chrome  Opera  Nokia Lumia 800  Nokia C7  with Symbian 3   Android stock and Firefox beta browsers    lt table id  properties  gt   lt tbody gt     lt tr gt       lt th gt Name lt  th gt       lt th gt Value lt  th gt       lt th gt  amp nbsp  lt  th gt     lt  tr gt     lt tr gt       lt td nowrap gt key1 lt  td gt       lt td gt  lt input type  text  name  property key1  value  value1  size  70   gt  lt  td gt       lt td class  data item options  gt          lt a class  buttonicon  href  javascript deleteRow    title  Delete row  onClick  deleteRow this   return false   gt  lt  a gt       lt  td gt     lt  tr gt   lt  tbody gt   lt  table gt    lt table id  properties rowtemplate  style  display none  data-counter  0  gt   lt tr gt    lt td gt  lt input type  text  name  newproperty name    counter   value    size  35   gt  lt  td gt    lt td gt  lt input type  text  name  newproperty value    counter   value    size  70   gt  lt  td gt    lt td gt  lt a class  buttonicon  href  javascript deleteRow    title  Delete row  onClick  deleteRow this   return false   gt  lt  a gt  lt  td gt   lt  tr gt   lt  table gt   lt a class  action  href  javascript addRow    onclick  addRow  properties    return false  title  Add new row  gt Add row lt  a gt  lt br  gt   lt br  gt   - - - -     add row to html table  read html from row template function addRow sTableId           find destination and template tables  find first  lt tr gt         in template  Wrap inner html around  lt tr gt  tags         Keep track of counter to give unique field names      var table          sTableId       var template         sTableId   rowtemplate        var htmlCode     lt tr gt   template find  tr first   html     lt  tr gt        var id   parseInt template data  counter   10  1      template data  counter   id       htmlCode   htmlCode replace     counter  g  id       table find  tbody last   append htmlCode         delete  lt TR gt  row  childElem is any element inside row function deleteRow childElem        var row     childElem  closest  tr       find  lt tr gt  parent     row remove        PS  I give all credits to the jQuery team  they deserve everything  JavaScript programming without jQuery - I don t even want think about that nightmare

[javascript] Add table row in jQuery

Examples related to javascript

Examples related to jquery

Examples related to html-table