title: Delete html Row and Delete Column dynamically using Javascript
body: <p>I'm trying to add and remove the row and column from a table dynamically. While I'm trying this with static contents my code working fine. Same thing I'm trying with fetching data from database and adding deleting row/column it's not working.. added rows are getting deleted but the value contains from mysql row and column not getting deleted.</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>//*********************************Start Add Row **********************************************************
  function addRowToTable() {
      var tbl = document.getElementById('tbl_sales'); 
      var columnCount = tbl.rows[0].cells.length; 
      var rowCount = tbl.rows.length; 
      var row = tbl.insertRow(rowCount);
  
      // For Every Row Added a Checkbox on first cell--------------------------------------
      var cell_1 = row.insertCell(0); 
      var element_1 = document.createElement("input"); 
      element_1.type = "checkbox"; 
      element_1.setAttribute('id', 'newCheckbox'); 
      cell_1.appendChild(element_1); 
  
      // For Every Row Added add a Select box on Second cell------------------------------
      var cell_2 = row.insertCell(1);
      var element_2 = document.createElement('input');
      element_2.type = "text"; 
      element_2.setAttribute('id', 'rows'); 
      element_2.setAttribute('name', 'rows[]'); 
      cell_2.appendChild(element_2); 
  
  
      // For Every Row Added add a textbox on the rest of the cells starting with the 3rd,4th,5th...  coloumns going on...
      if (columnCount &gt;= 2) {
          for (var i = 3; i &lt;= columnCount; i++) {
              var newCel = row.insertCell(i - 1);       
              var element_3 = document.createElement("input");
              element_3.type = "text";
              element_3.setAttribute('id', 'name'); 
              element_3.setAttribute('name', 'name[]'); 
              newCel.appendChild(element_3);
          }
      }
  }
  //***************************** End Add Row ***************************************************************
  // *****************************Start Add Column**********************************************************
  function addColumn() {
      var tblBodyObj = document.getElementById('tbl_sales').tBodies[0];
      var rowCount = tblBodyObj.rows.length;
  
      //for every Coloumn Added Add checkbox on first row ----------------------------------------------
      var newchkbxcell = tblBodyObj.rows[0].insertCell(-1);
      var element_4 = document.createElement("input");
      element_4.type = "checkbox";
      element_4.setAttribute('id', 'newCheckbox');
      newchkbxcell.appendChild(element_4);
  
      //For Every Coloumn Added add Drop down list on second row-------------------------------------
      var newselectboxcell = tblBodyObj.rows[1].insertCell(-1);
      var element_5 = document.createElement('input');
      element_5.type = "text";
      element_5.setAttribute('id', 'cols');
      element_5.setAttribute('name', 'cols[]');
      newchkbxcell.appendChild(element_4);
  
      newselectboxcell.appendChild(element_5);
  
  
      for (var i = 2; i &lt; tblBodyObj.rows.length; i++) { 
          var newCell = tblBodyObj.rows[i].insertCell(-1); 
          var element_6 = document.createElement("input");
          element_6.type = "text"
          element_6.setAttribute('id', 'name');
          element_6.setAttribute('name', 'name[]');
          newCell.appendChild(element_6)
      }
  }
  //*****************************Start Delete Selected Rows **************************************************
  function deleteSelectedRows() {
      var tb = document.getElementById('tbl_sales');
      var NoOfrows = tb.rows.length;
      for (var i = 0; i &lt; NoOfrows; i++) {
          var row = tb.rows[i];
          var chkbox = row.cells[0].childNodes[0];           
          if (null != chkbox &amp;&amp; true == chkbox.checked) {       
              tb.deleteRow(i);               
              NoOfrows--;             
              i--;
          }
      }
  }
  //*****************************End Delete Selected Columns **************************************************
  //*****************************Start Delete Selected Columns ************************************************
  function deleteSelectedColoumns() {
      var tb = document.getElementById('tbl_sales'); 
      var NoOfcolumns = tb.rows[0].cells.length; 
  
      for (var clm = 3; clm &lt; NoOfcolumns; clm++) {
          var rw = tb.rows[0]; 
          var chkbox = rw.cells[clm].childNodes[0];
  
          console.log(clm, NoOfcolumns, chkbox); 
          if (null != chkbox &amp;&amp; true == chkbox.checked) {
  
              //-----------------------------------------------------
              var lastrow = tb.rows;
              for (var x = 0; x &lt; lastrow.length; x++) {
                  tb.rows[x].deleteCell(clm);
              }
              //----------------------------------------- 
              NoOfcolumns--;
              clm--;
          } else {
              //alert("not selected");
          }
      }
  }
  
  function deleteAllRows() {    
   var tbl = document.getElementById('tbl_sales'); // table reference        
   lastRow = tbl.rows.length - 1; // set the last row index           
   // delete rows with index greater then 0    
   for (i = lastRow; i &gt; 0; i--) {        
    tbl.deleteRow(i);  //delete the row  
   }
  } 
  //*****************************End Delete Selected Columns **************************************************
  
  //window.onload = function () {addColumn();addColumn();addColumn();};
  </code></pre>
  
  <p><strong>Page:</strong></p>
  
  <pre><code>&lt;table width="30" border="1" id="tbl_sales"&gt;
                        &lt;tr&gt;
                            &lt;td&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;strong&gt;Columns&lt;/strong&gt; &lt;/td&gt;
                            {php}
                                  $j = 0;
                                  for($i=0;$i&lt;count($rows[0]);$i++)
                                  { 
                                {/php}
                            &lt;td&gt;
                            {php} if($j == 0) { {/php}
                                  &lt;input type="button" name="adclmbutton" id="addclmnbutton" value="Add Columns" onclick="addColumn()" /&gt;
                              {php}}else{{/php}
                                  &lt;input type="checkbox" id="newCheckbox"&gt;
                             {php}}{/php}
                            &lt;/td&gt; 
                            {php}$j++;}{/php}
                          &lt;/tr&gt;
                          &lt;tr&gt;
                            &lt;td&gt;&lt;strong&gt;Rows&lt;/strong&gt; &lt;/td&gt;
                            &lt;td&gt;&lt;strong&gt;Rows Grid&lt;/strong&gt; &lt;/td&gt;
                            {php}
                                  $j = 0;
                                  for($i=0;$i&lt;count($rows[0]);$i++)
                                  { 
                                {/php}
                            &lt;td&gt;&lt;input type="text" name="cols[]" value="{php} echo $rows[0][$i]; {/php}" id=""/&gt;&lt;/td&gt;
                            {php}}$i++;{/php}
                          &lt;/tr&gt;
                          {php}
                          $seats = $CI-&gt;model_theatre-&gt;convetTable($m_arr);
                          unset($seats[0]);
                          $i = 0;
                         foreach ($seats as $rowName =&gt; $columns) 
                         {
                        {/php}
                          &lt;tr &gt;
                            &lt;td&gt; 
                              {php} if($i == 0) { {/php}
                                  &lt;input type="button" name="addrowbutton" id="adrwbutton" value="Add Row" onclick="addRowToTable();"/&gt;
                              {php}}else{{/php}
                                  &lt;input type="checkbox" id="newCheckbox"&gt;
                             {php}}{/php}&lt;/td&gt;
                            &lt;td&gt;&lt;input type="text" name="rows[]" value="{php}echo $rowName;{/php}" /&gt;&lt;/td&gt;
  
                             {php}
                                  foreach ($columns as $cell) 
                                  { 
                              {/php}
                                  &lt;td&gt;&lt;label for="textfield"&gt;&lt;/label&gt;&lt;input type="text" name="name[]" value="{php} echo $cell;{/php}" width="50px" /&gt;&lt;/td&gt;
                              {php}
                                  }
                              {/php}
                              &lt;/tr&gt;
                          {php}
                              $i++;
                             }
                          {/php}
                       &lt;/table&gt;
                      {php}
                          }
  
                     {/php}
   &lt;p&gt;
                          &lt;input type="button" name="button3" id="button3" value="Remove Selected Row" onClick="deleteSelectedRows()" /&gt;
                          &lt;input type="button" value="Delete all rows" onClick="deleteAllRows()" /&gt;
                          &lt;input type="button" name="button4" id="button4" value="Remove Selected Column" onClick="deleteSelectedColoumns()" /&gt;
                        &lt;/p&gt;
  </code></pre>