Add Delete table rows dynamically using JavaScript

Question

I m trying to add delete table rows following this example  and  this example       Here s my code    HTML Form   lt div id  POItablediv  gt       lt input type  button  id  addPOIbutton  value  Add POIs   gt  lt br  gt  lt br  gt       lt table id  POITable  border  1  gt           lt tr gt               lt td gt POI lt  td gt               lt td gt Latitude lt  td gt               lt td gt Longitude lt  td gt               lt td gt Delete  lt  td gt               lt td gt Add Rows  lt  td gt           lt  tr gt           lt tr gt               lt td gt 1 lt  td gt               lt td gt  lt input size 25 type  text  id  latbox  readonly true  gt  lt  td gt               lt td gt  lt input size 25 type  text  id  lngbox  readonly true  gt  lt  td gt               lt td gt  lt input type  button  id  delPOIbutton  value  Delete  onclick  deleteRow this    gt  lt  td gt               lt td gt  lt input type  button  id  addmorePOIbutton  value  Add More POIs  onclick  insRow     gt  lt  td gt           lt  tr gt       lt  table gt   lt  div gt    JavaScript  function deleteRow row        var i row parentNode parentNode rowIndex      document getElementById  POITable   deleteRow i       function insRow         var x document getElementById  POITable   insertRow 1       var c1 x insertCell 0       var c2 x insertCell 1       c1 innerHTML  NEW CELL1       c2 innerHTML  NEW CELL2       Now  as you can see  In my table I have text fields and buttons  What I want     Just to repeat the structure of the row  I can t do it right now since innerHTM just takes texts  How can I insert a textfield or label  The ids of the textfields should also be different since I ll retrieve the values later to put it in a database  I want to put a function to increment the number of POIs as well   Can anyone help me out please

User · Accepted Answer

You could just clone the first row that has the inputs, then get the nested inputs and update their ID to add the row number (and do the same with the first cell).

function deleteRow(row)
{
    var i=row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
    var x=document.getElementById('POITable');
       // deep clone the targeted row
    var new_row = x.rows[1].cloneNode(true);
       // get the total number of rows
    var len = x.rows.length;
       // set the innerHTML of the first row 
    new_row.cells[0].innerHTML = len;

       // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

       // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

       // append the new row to the table
    x.appendChild( new_row );
}

Demo below

_x000D_

function deleteRow(row) {_x000D_
  var i = row.parentNode.parentNode.rowIndex;_x000D_
  document.getElementById('POITable').deleteRow(i);_x000D_
}_x000D_
_x000D_
_x000D_
function insRow() {_x000D_
  console.log('hi');_x000D_
  var x = document.getElementById('POITable');_x000D_
  var new_row = x.rows[1].cloneNode(true);_x000D_
  var len = x.rows.length;_x000D_
  new_row.cells[0].innerHTML = len;_x000D_
_x000D_
  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];_x000D_
  inp1.id += len;_x000D_
  inp1.value = '';_x000D_
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];_x000D_
  inp2.id += len;_x000D_
  inp2.value = '';_x000D_
  x.appendChild(new_row);_x000D_
}

_x000D_

<div id="POItablediv">_x000D_
  <input type="button" id="addPOIbutton" value="Add POIs" /><br/><br/>_x000D_
  <table id="POITable" border="1">_x000D_
    <tr>_x000D_
      <td>POI</td>_x000D_
      <td>Latitude</td>_x000D_
      <td>Longitude</td>_x000D_
      <td>Delete?</td>_x000D_
      <td>Add Rows?</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td><input size=25 type="text" id="latbox" /></td>_x000D_
      <td><input size=25 type="text" id="lngbox" readonly=true/></td>_x000D_
      <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>_x000D_
      <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()" /></td>_x000D_
    </tr>_x000D_
  </table>

_x000D_

User · Answer

Easy Javascript Add more Rows with delete functionality  Cheers     lt TABLE id  dataTable  gt   lt tr gt  lt td gt                  lt INPUT TYPE submit name submit id button class btn medium VALUE   Save     gt                  lt INPUT type  button  value  AddMore  onclick  addRow   dataTable     class  btn medium       gt    lt  td gt  lt  tr gt    lt TR gt   lt TD gt                    lt input type  text  size  20  name  values     gt   lt br gt  lt small gt  lt font color  gray  gt Enter Title lt  font gt  lt  small gt    lt  TD gt   lt  TR gt   lt  table gt      lt script gt    function addRow tableID             var table   document getElementById tableID            var rowCount   table rows length          var row   table insertRow rowCount            var cell3   row insertCell 0          cell3 innerHTML   cell3 innerHTML     lt input type  text  size  20  name  values     gt   lt INPUT type  button   class  btn medium  value  Remove  onclick  this parentNode parentNode parentNode removeChild this parentNode parentNode      gt  lt br gt  lt small gt  lt font color  gray  gt Enter Title lt  font gt  lt  small gt        cell3 innerHTML   cell3 innerHTML     lt input type  text  size  20  name  values     gt   lt INPUT type  button   class  btn medium  value  Remove  onclick  this parentNode parentNode innerHTML          gt  lt br gt  lt small gt  lt font color  gray  gt Enter Title lt  font gt  lt  small gt               lt  script gt

User · Answer

This code may help some one       lt HTML gt   lt HEAD gt       lt TITLE gt  Add Remove dynamic rows in HTML table  lt  TITLE gt       lt style type  text css  gt           democlass              color red                 lt  style gt       lt SCRIPT language  javascript  gt          function addRow tableID                 var table   document getElementById tableID               var rowCount   table rows length              var colCount   table rows 0  cells length               var row   table insertRow rowCount               for var i   0  i  lt  colCount  i                      var newcell   row insertCell i                   newcell innerHTML   table rows 0  cells i  innerHTML                             row   table insertRow table rows length               for var i   0  i  lt  colCount  i                      var newcell   row insertCell i                   newcell innerHTML   table rows 1  cells i  innerHTML                             row   table insertRow table rows length               for var i   0  i  lt  colCount  i                      var newcell   row insertCell i                   newcell innerHTML   table rows 2  cells i  innerHTML                             row   table insertRow table rows length               for var i   0  i  lt  colCount  i                       var newcell   row insertCell i                   if i     colCount - 1                         newcell innerHTML     lt INPUT type   button   value   Delete Row   onclick   removeRow this     gt                      else                       newcell innerHTML   table rows 3  cells i  innerHTML                                                                    This method deletes the specified section of the table            OR deletes the specified rows from the table                      function removeRow src                 var oRow   src parentElement parentElement              var rowsCount   0              for var index   oRow rowIndex  index  gt   0  index--                     document getElementById  dataTable   deleteRow index                   if rowsCount     4 - 1                         return                                    rowsCount                                once the row reference is obtained  delete it passing in its rowIndex                document getElementById  dataTable   deleteRow oRow rowIndex                     lt  SCRIPT gt   lt  HEAD gt   lt BODY gt       lt form name  myForm  gt           lt TABLE id  dataTable  width  350px  border  1  gt               lt TR gt                   lt TD gt                       lt INPUT type  checkbox  name  chk   gt                   lt  TD gt                   lt TD gt                      Code                  lt  TD gt                   lt TD gt                       lt INPUT type  text  name  txt   gt                   lt  TD gt                   lt TD gt                      Select Country                  lt  TD gt                   lt TD gt                       lt SELECT name  country  gt                           lt OPTION value  in  gt India lt  OPTION gt                           lt OPTION value  de  gt Germany lt  OPTION gt                           lt OPTION value  fr  gt France lt  OPTION gt                           lt OPTION value  us  gt United States lt  OPTION gt                           lt OPTION value  ch  gt Switzerland lt  OPTION gt                       lt  SELECT gt                   lt  TD gt               lt  TR gt               lt TR gt                   lt TD gt  amp nbsp  lt  TD gt                   lt TD gt                      First Name                  lt  TD gt                   lt TD gt                       lt INPUT type  text  name  txt1   gt                   lt  TD gt                   lt TD gt                      Last Name                  lt  TD gt                   lt TD gt                       lt INPUT type  text  name  txt2   gt                   lt  TD gt               lt  TR gt               lt TR gt                   lt TD gt  amp nbsp  lt  TD gt                   lt TD gt Phone lt  TD gt                   lt TD gt                       lt INPUT type  text  name  txt3   gt                   lt  TD gt                   lt TD gt Address lt  TD gt                   lt TD gt                       lt INPUT type  text  name  txt4  class  democlass   gt                   lt  TD gt               lt  TR gt               lt TR gt                   lt TD gt  amp nbsp  lt  TD gt                   lt TD gt  amp nbsp  lt  TD gt                   lt TD gt                       amp nbsp                   lt  TD gt                   lt TD gt  amp nbsp  lt  TD gt                   lt TD gt                       lt INPUT type  button  value  Add Row  onclick  addRow  dataTable      gt                   lt  TD gt               lt  TR gt           lt  TABLE gt   lt  BODY gt   lt  HTML gt

User · Answer

I used some of the solutions indicated above plus solutions from other postings to come up with a working solution for a dynamic table containing input fields  I m doing this because it might help someone who finds this thread after searching for the same things that led me to it  and also because the accepted answer  and associated jsfiddle  doesn t actually work  That is  it doesn t index the table rows correctly after a number of inserts deletes   The key issue is how to uniquely index the dynamic row data  which is possible with a bit of jquery    lt form id frmLines gt     lt table id tabLines gt     lt tr gt       lt td gt img src   some suitable graphic  onclick  removeLine this     gt  lt  td gt       lt td gt  lt input type  text  name  field1    gt  lt  td gt       lt td gt  lt input type  text  name  field2    gt  lt  td gt       lt td gt  lt input type  text  name  field3    gt  lt  td gt     lt  tr gt     lt tr gt       lt td gt  lt img src   some suitable graphic  onclick  addLine       gt  lt  td gt       lt td colspan 3 gt  amp nbsp  lt  td gt     lt  tr gt     lt  table gt   lt  form gt    Note the form and table have id s for direct DOM referencing  but you can t use id s on the input fields as to make them unique you d need to introduce an index which would massively complicate the code - and its easy enough to access them by name when the form is processed  see below   Then the javascript to control adding and removing lines is like this   function addLine       var tabLines   document getElementById  tabLines      var tabLinesRow   tabLines insertRow tabLines rows length-1     var col1html     lt img src   some suitable graphic  onclick  removeLine this    gt      var col2html     lt input type  text  name  field1    gt      var col3html     lt input type  text  name  field2    gt      var col4html     lt input type  text  name  field3    gt       var col1   tabLinesRow insertCell 0   col1 innerHTML col1html    var col2   tabLinesRow insertCell 1   col2 innerHTML col2html    var col3   tabLinesRow insertCell 2   col3 innerHTML col3html    var col4   tabLinesRow insertCell 3   col4 innerHTML col4html     function removeLine lineItem      var row   lineItem parentNode parentNode    row parentNode removeChild row       Then the final part of the jigsaw - the javascript to process the form data when its submitted  The key jquery function here is  eq   - which allows you to access the field names in the order they appear in the form - i e  in table row order   var frmData                       an object to contain all form data var arrLines   new Array          array to contain the dynamic lines  var tabLines   document getElementById  tabLines   rows length-1   for  i 0 i lt tabLines i        arrLines i          arrLines i   no         i 1    arrLines i   field1         frmLines input name field1    eq i  val      arrLines i   field2         frmLines input name field2    eq i  val      arrLines i   field3         frmLines input name field3    eq i  val      frmData  lines     arrLines   frmData  another field         frmLines input name another field    val     var jsonData   JSON stringify frmData       lines of data now in a JSON structure as indexed array     plus other fields in the JSON as required     ready to post via ajax etc   I hope this helps someone  either directly or indirectly  There are a couple of subtle techniques being used which aren t that complicated but took me 3-4 hours to piece together

User · Answer

1  amp  2  innerHTML can take HTML as well as text  You could do something like   c1 innerHTML     lt input size 25 type   text   id  newID  readonly true  gt     May or may not be the best way to do it  but you could do it that way   3  I would just use a global variable that holds the number of POIs and increment decrement it each time

User · Answer

You can add a row to a table in the most easiest way like this  -     I found this as an easiest way to add row   The awesome thing about this is that it doesn t change the already present table contents even if it contains input elements      row     lt tr gt  lt td gt  lt input type  text  gt  lt  td gt  lt  tr gt       table body tr last   after row      Here  table body is the id of the table body tag

User · Answer

If you put a delete button on each row  then    lt tr gt     lt td gt  lt input type  button  value  Delete row  onclick  deleteRow this    gt     lt td gt  lt input type  text  gt     lt td gt  lt input type  text  gt    And the deleteRow function can be   function deleteRow el           while there are parents  keep going until reach TR      while  el parentNode  amp  amp  el tagName toLowerCase       tr             el   el parentNode                If el has a parentNode it must be a TR  so delete it        Don t delte if only 3 rows left in table     if  el parentNode  amp  amp  el parentNode rows length  gt  3            el parentNode removeChild el             If all your rows have the same content  it will be much faster to add a row by cloning an existing row   function addRow tableID        var table   document getElementById tableID        if   table  return       var newRow   table rows 1  cloneNode true           Now get the inputs and modify their names      var inputs   newRow getElementsByTagName  input         for  var i 0  iLen inputs length  i lt iLen  i                 Update inputs i                Add the new row to the tBody  required for IE      var tBody   table tBodies 0       tBody insertBefore newRow  tBody lastChild

User · Answer

Here Is full code with HTML CSS and JS    lt style gt  lt style id  generate-style-inline-css  type  text css  gt      body           background-color   efefef          color   3a3a3a             a      a visited           color   1e73be             a hover      a focus      a active           color   000000             body  grid-container           max-width  1200px             body      button      input      select      textarea           font-family   Open Sans   sans-serif              entry-content gt  class   wp-block-   not  last-child            margin-bottom  1 5em              main-navigation  main-nav ul ul li a           font-size  14px              media  max-width 768px             main-title               font-size  30px                    h1               font-size  30px                    h2               font-size  25px                        top-bar           background-color   636363          color   ffffff              top-bar a       top-bar a visited           color   ffffff              top-bar a hover           color   303030              site-header           background-color   ffffff          color   3a3a3a              site-header a       site-header a visited           color   3a3a3a              main-title a       main-title a hover       main-title a visited           color   222222              site-description           color   757575              main-navigation       main-navigation ul ul           background-color   222222              main-navigation  main-nav ul li a       menu-toggle           color   ffffff              main-navigation  main-nav ul li hover gt a       main-navigation  main-nav ul li focus gt a       main-navigation  main-nav ul li sfHover gt a           color   ffffff          background-color   3f3f3f             button menu-toggle hover      button menu-toggle focus       main-navigation  mobile-bar-items a       main-navigation  mobile-bar-items a hover       main-navigation  mobile-bar-items a focus           color   ffffff              main-navigation  main-nav ul li class   current-menu-   gt a           color   ffffff          background-color   3f3f3f              main-navigation  main-nav ul li class   current-menu-   gt a hover       main-navigation  main-nav ul li class   current-menu-    sfHover gt a           color   ffffff          background-color   3f3f3f              navigation-search input type  search         navigation-search input type  search   active           color   3f3f3f          background-color   3f3f3f              navigation-search input type  search   focus           color   ffffff          background-color   3f3f3f              main-navigation ul ul           background-color   3f3f3f              main-navigation  main-nav ul ul li a           color   ffffff              main-navigation  main-nav ul ul li hover gt a       main-navigation  main-nav ul ul li focus gt a       main-navigation  main-nav ul ul li sfHover gt a           color   ffffff          background-color   4f4f4f              main-navigation   main-nav ul ul li class   current-menu-   gt a           color   ffffff          background-color   4f4f4f              main-navigation  main-nav ul ul li class   current-menu-   gt a hover       main-navigation  main-nav ul ul li class   current-menu-    sfHover gt a           color   ffffff          background-color   4f4f4f              separate-containers  inside-article       separate-containers  comments-area       separate-containers  page-header       one-container  container       separate-containers  paging-navigation       inside-page-header           background-color   ffffff              entry-meta           color   595959              entry-meta a       entry-meta a visited           color   595959              entry-meta a hover           color   1e73be              sidebar  widget           background-color   ffffff              sidebar  widget  widget-title           color   000000              footer-widgets           background-color   ffffff              footer-widgets  widget-title           color   000000              site-info           color   ffffff          background-color   222222              site-info a       site-info a visited           color   ffffff              site-info a hover           color   606060              footer-bar  widget nav menu  current-menu-item a           color   606060             input type  text        input type  email        input type  url        input type  password        input type  search        input type  tel        input type  number        textarea      select           color   666666          background-color   fafafa          border-color   cccccc             input type  text   focus      input type  email   focus      input type  url   focus      input type  password   focus      input type  search   focus      input type  tel   focus      input type  number   focus      textarea focus      select focus           color   666666          background-color   ffffff          border-color   bfbfbf             button      html input type  button        input type  reset        input type  submit        a button      a button visited      a wp-block-button  link not  has-background            color   ffffff          background-color   666666             button hover      html input type  button   hover      input type  reset   hover      input type  submit   hover      a button hover      button focus      html input type  button   focus      input type  reset   focus      input type  submit   focus      a button focus      a wp-block-button  link not  has-background  active      a wp-block-button  link not  has-background  focus      a wp-block-button  link not  has-background  hover           color   ffffff          background-color   3f3f3f              generate-back-to-top       generate-back-to-top visited           background-color  rgba  0  0  0  0 4           color   ffffff              generate-back-to-top hover       generate-back-to-top focus           background-color  rgba  0  0  0  0 6           color   ffffff              entry-content  alignwide      body not  no-sidebar   entry-content  alignfull           margin-left  -40px          width  calc 100    80px           max-width  calc 100    80px               media  max-width 768px             separate-containers  inside-article           separate-containers  comments-area           separate-containers  page-header           separate-containers  paging-navigation           one-container  site-content           inside-page-header               padding  30px                     entry-content  alignwide          body not  no-sidebar   entry-content  alignfull               margin-left  -30px              width  calc 100    60px               max-width  calc 100    60px                         rtl  menu-item-has-children  dropdown-menu-toggle           padding-left  20px              rtl  main-navigation  main-nav ul li menu-item-has-children gt a           padding-right  20px              one-container  sidebar  widget           padding  0px              append row           color  black  important          background-color   FFD6D6  important          border  1px  ccc solid  important              append column           color  black  important          background-color   D6FFD6  important          border  1px  ccc solid  important             table my-table td           width  50px          height  27px          border  1px solid  D3D3D3          text-align  center          padding  0             div my-container input           padding  5px          font-size  12px  important          width  100px          margin  2px              row           background-color   FFD6D6  important              col           background-color   D6FFD6  important             lt  style gt       lt script src  https   code jquery com jquery-1 11 0 js  gt  lt  script gt       lt script gt          append row to the HTML table     function appendRow             var tbl   document getElementById  my-table       table reference             row   tbl insertRow tbl rows length           append table row             i             insert table cells to the new row         for  i   0  i  lt  tbl rows 0  cells length  i                  createCell row insertCell i   i   row                            create DIV element and append to the table cell     function createCell cell  text  style            var div   document createElement  div       create DIV element             txt   document createTextNode text      create text node         div appendChild txt                         append text node to the DIV         div setAttribute  class   style             set DIV class attribute         div setAttribute  className   style         set DIV class attribute for IE              cell appendChild div                        append DIV to the table cell               append column to the HTML table     function appendColumn             var tbl   document getElementById  my-table       table reference             i             open loop for each row and append cell         for  i   0  i  lt  tbl rows length  i                  createCell tbl rows i  insertCell tbl rows i  cells length   i   col                            delete table rows with index greater then 0     function deleteRows             var tbl   document getElementById  my-table       table reference             lastRow   tbl rows length - 1                 set the last row index             i             delete rows with index greater then 0         for  i   lastRow  i  gt  0  i--                tbl deleteRow i                           delete table columns with index greater then 0     function deleteColumns             var tbl   document getElementById  my-table       table reference             lastCol   tbl rows 0  cells length - 1        set the last column index             i  j             delete cells with index greater then 0  for each row          for  i   0  i  lt  tbl rows length  i                  for  j   lastCol  j  gt  0  j--                    tbl rows i  deleteCell j                                      lt  script gt       lt div id  my-container  gt       lt center gt  lt br gt       lt input type  button  value  Add row  onclick  javascript appendRow    class  append row  gt  lt br gt       lt input type  button  value  Add column  onclick  javascript appendColumn    class  append column  gt  lt br gt       lt input type  button  value  Delete rows  onclick  javascript deleteRows    class  delete  gt  lt br gt       lt input type  button  value  Delete columns  onclick  javascript deleteColumns    class  delete  gt  lt br gt       lt input type  button  value  Delete both  onclick  javascript deleteColumns   deleteRows    class  delete  gt  lt p gt  lt  p gt       lt table id  my-table  align  center  cellspacing  0  cellpadding  0  border  0  gt       lt tbody gt  lt tr gt       lt td gt Small lt  td gt       lt  tr gt       lt  tbody gt  lt  table gt       lt p gt  lt  p gt  lt  center gt       lt  div gt

User · Answer

This seems a lot cleaner than the answer above      lt script gt  var maxID   0  function getTemplateRow     var x   document getElementById  templateRow   cloneNode true   x id       x style display       x innerHTML   x innerHTML replace   id      maxID   return x    function addRow     var t   document getElementById  theTable    var rows   t getElementsByTagName  tr    var r   rows rows length - 1   r parentNode insertBefore getTemplateRow    r       lt  script gt     lt table id  theTable  gt   lt tr gt   lt td gt id lt  td gt   lt td gt name lt  td gt   lt  tr gt   lt tr id  templateRow  style  display none  gt   lt td gt  id  lt  td gt   lt td gt  lt input   gt  lt  td gt   lt  tr gt   lt  table gt     lt button onclick  addRow     gt Go lt  button gt

User · Answer

Javascript dynamically adding table data   SCRIPT    function addRow tableID        var table   document getElementById tableID       var rowCount   table rows length      var colCount   table rows 0  cells length          var validate Noof columns    colCount - 1         No Of Columns to be Validated on Text      for var j   0  j  lt  colCount  j               var text   window document getElementById  input  j  value           if  j    validate Noof columns                row   table insertRow 2         location of new row              for var i   0  i  lt  colCount  i                         var text   window document getElementById  input  i  value              var newcell   row insertCell i                   if i     colCount - 1         Replace last column with delete button     newcell innerHTML     lt INPUT type  button  value  X  onclick  removeRow this    gt    break                    else                        newcell innerHTML   text                      window document getElementById  input  i  value                                                   else if  text     undefined   amp  amp  text trim                        alert  input  j   is EMPTY   break                         function removeRow onclickTAG           Iterate till we find TR tag       while    onclickTAG   onclickTAG parentElement    amp  amp  onclickTAG tagName     TR                 onclickTAG parentElement removeChild onclickTAG             HTMl   lt div align  center  gt   lt TABLE id  dataTable  border  1   gt   lt TBODY gt       lt TR gt  lt th align  center  gt  lt b gt First Name  lt  b gt  lt  th gt           lt th align  center  colspan  2  gt  lt b gt Last  Name  lt  b gt  lt  th gt           lt th gt  lt  th gt       lt  TR gt           lt TR gt  lt TD  gt  lt INPUT id  input0  type  text   gt  lt  TD gt                         lt TD  gt  lt INPUT id  input1  type  text   gt  lt  TD gt           lt TD gt   lt INPUT type  button  id  input2  value     onclick  addRow  dataTable      gt           lt  TD gt       lt  TR gt   lt  TBODY gt    lt  TABLE gt   lt  div gt    Example   jsfiddle

[javascript] Add/Delete table rows dynamically using JavaScript

Examples related to javascript

Examples related to html