How to insert a row in an HTML table body in JavaScript

Question

I have an HTML table with a header and a footer    lt table id  myTable  gt       lt thead gt           lt tr gt               lt th gt My Header lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt aaaaa lt  td gt           lt  tr gt       lt  tbody gt       lt tfoot gt           lt tr gt               lt td gt My footer lt  td gt           lt  tr gt       lt tfoot gt   lt  table gt    I am trying to add a row in tbody with the following   myTable insertRow myTable rows length - 1     but the row is added in the tfoot section   How do I insert tbody

User · Accepted Answer

If you want to add a row into the tbody  get a reference to it and call its insertRow method   x000D   x000D  var tbodyRef   document getElementById  myTable   getElementsByTagName  tbody   0       Insert a row at the end of table var newRow   tbodyRef insertRow        Insert a cell at the end of the row var newCell   newRow insertCell        Append a text node to the cell var newText   document createTextNode  new row    newCell appendChild newText   x000D   lt table id  myTable  gt     lt thead gt       lt tr gt         lt th gt My Header lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt initial row lt  td gt       lt  tr gt     lt  tbody gt     lt tfoot gt       lt tr gt         lt td gt My Footer lt  td gt       lt  tr gt     lt  tfoot gt   lt  table gt  x000D   x000D   x000D    old demo on JSFiddle

User · Answer

Add Column  Add Row  Delete Column  Delete Row  Simplest way  x000D   x000D      function addColumn myTable          var table   document getElementById myTable         var row   table getElementsByTagName  tr          for i 0 i lt row length i             row i  innerHTML   row i  innerHTML     lt td gt  lt  td gt                      function deleterow tblId                       var table   document getElementById tblId         var row   table getElementsByTagName  tr                if row length   1                    row row length - 1  outerHTML                             function deleteColumn tblId                var allRows   document getElementById tblId  rows          for  var i 0  i lt allRows length  i                  if  allRows i  cells length  gt  1                    allRows i  deleteCell -1                                     function myFunction myTable          var table   document getElementById myTable         var row   table getElementsByTagName  tr          var row   row row length-1  outerHTML        table innerHTML   table innerHTML   row        var row   table getElementsByTagName  tr          var row   row row length-1  getElementsByTagName  td          for i 0 i lt row length i             row i  innerHTML                     x000D      table  td         border  1px solid black        border-collapse collapse            td         cursor text        padding 10px            td empty after        content  Type here            color  cccccc        x000D      lt  DOCTYPE html gt       lt html gt       lt head gt       lt  head gt       lt body gt       lt form gt       lt p gt       lt input type  button  value   Column  onclick  addColumn  tblSample    gt       lt input type  button  value  -Column  onclick  deleteColumn  tblSample    gt       lt input type  button  value   Row  onclick  myFunction  tblSample    gt       lt input type  button  value  -Row  onclick  deleterow  tblSample    gt       lt  p gt       lt table id  tblSample  contenteditable gt  lt tr gt  lt td gt  lt  td gt  lt  tr gt  lt  table gt       lt  form gt        lt  body gt       lt  html gt  x000D   x000D   x000D

User · Answer

You can try the following snippet using jQuery     table  find  tbody   append   lt tr gt  lt td gt aaaa lt  td gt  lt  tr gt

User · Answer

You re close  Just add the row to the tbody instead of table   myTbody insertRow      Just get a reference to tBody  myTbody  before use  Notice that you don t need to pass the last position in a table  it s automatically positioned at the end when omitting argument   A live demo is at jsFiddle

User · Answer

You can use the following example    lt table id  purches  gt       lt thead gt           lt tr gt               lt th gt ID lt  th gt               lt th gt Transaction Date lt  th gt               lt th gt Category lt  th gt               lt th gt Transaction Amount lt  th gt               lt th gt Offer lt  th gt           lt  tr gt       lt  thead gt        lt  --   lt tr th each  person    list       gt               lt td gt  lt li th each  person    list   th text     person description    gt  lt  li gt  lt  td gt               lt td gt  lt li th each  person    list   th text     person price    gt  lt  li gt  lt  td gt               lt td gt  lt li th each  person    list   th text     person available    gt  lt  li gt  lt  td gt               lt td gt  lt li th each  person    list   th text     person from    gt  lt  li gt  lt  td gt               lt  tr gt      -- gt        lt tbody id  feedback  gt       lt  tbody gt   lt  table gt    JavaScript file     ajax       type   POST       contentType   application json       url    search       data  JSON stringify search       dataType   json       cache  false      timeout  600000      success  function  data                var json     lt h4 gt Ajax Response lt  h4 gt  lt pre gt      JSON stringify data  null  4      lt  pre gt                   feedback   html json                      console log  SUCCESS     data                 btn-search   prop  disabled   false            for  var i   0  i  lt  data length  i                        feedback   append   lt tr gt  lt td gt     data i  accountNumber     lt  td gt  lt td gt     data i  category     lt  td gt  lt td gt     data i  ssn     lt  td gt  lt  tr gt                     feedback   append   lt tr gt  lt td gt     data i  accountNumber     lt  td gt  lt td gt     data i  category     lt  td gt  lt td gt     data i  ssn     lt  td gt  lt td gt     data i  ssn     lt  td gt  lt td gt     data i  ssn     lt  td gt  lt  tr gt                  alert data i  accountNumber                       error  function  e            var json     lt h4 gt Ajax Response lt  h4 gt  lt pre gt     e responseText     lt  pre gt                feedback   html json            console log  ERROR     e               btn-search   prop  disabled   false

User · Answer

Basic approach   This should add HTML-formatted content and show the newly added row   var myHtmlContent     lt h3 gt hello lt  h3 gt   var tableRef   document getElementById  myTable   getElementsByTagName  tbody   0    var newRow   tableRef insertRow tableRef rows length   newRow innerHTML   myHtmlContent

User · Answer

I think this script is what exactly you need       var t   document getElementById  myTable    var r  document createElement  TR    t tBodies 0  appendChild r

User · Answer

Add rows    x000D   x000D   lt html gt  x000D       lt script gt  x000D          function addRow     x000D              var table   document getElementById  myTable    x000D                var row   document getElementById  myTable    x000D              var x   table insertRow 0   x000D              var e   table rows length-1  x000D              var l   table rows e  cells length  x000D                x innerHTML     amp nbsp    x000D   x000D              for  var c 0  m l  c  lt  m  c      x000D                  table rows 0  insertCell c   x000D                  table rows 0  cells c  innerHTML     amp nbsp  amp nbsp    x000D                x000D            x000D   x000D          function addColumn     x000D              var table   document getElementById  myTable    x000D              for  var r   0  n   table rows length  r  lt  n  r      x000D                  table rows r  insertCell 0   x000D                  table rows r  cells 0  innerHTML     amp nbsp  amp nbsp    x000D                x000D            x000D   x000D          function deleteRow     x000D              document getElementById  myTable   deleteRow 0   x000D            x000D   x000D          function deleteColumn     x000D                 var row   document getElementById  myRow    x000D              var table   document getElementById  myTable    x000D              for  var r   0  n   table rows length  r  lt  n  r      x000D                  table rows r  deleteCell 0      var table handle x000D                x000D            x000D       lt  script gt  x000D   x000D       lt body gt  x000D           lt input type  button  value  row    onClick  addRow    border 0 style  cursor hand  gt  x000D           lt input type  button  value  row -  onClick  deleteRow    border 0 style  cursor hand  gt  x000D           lt input type  button  value  column    onClick  addColumn    border 0 style  cursor hand  gt  x000D           lt input type  button  value  column -  onClick  deleteColumn    border 0 style  cursor hand  gt  x000D   x000D           lt table  id  myTable  border 1 cellpadding 0 cellspacing 0 gt  x000D               lt tr id  myRow  gt  x000D                   lt td gt  amp nbsp  lt  td gt  x000D                   lt td gt  amp nbsp  lt  td gt  x000D                   lt td gt  amp nbsp  lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt  amp nbsp  lt  td gt  x000D                   lt td gt  amp nbsp  lt  td gt  x000D                   lt td gt  amp nbsp  lt  td gt  x000D               lt  tr gt  x000D           lt  table gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    And cells

User · Answer

I have tried this  and this is working for me   var table   document getElementById  myTable    var row   table insertRow myTable rows length-2   var cell1   row insertCell 0

[javascript] How to insert a row in an HTML table body in JavaScript

Examples related to javascript

Examples related to html

Examples related to html-table

Examples related to insert

Examples related to row