php - Delete html Row and Delete Column dynamically using Javascript -

i'm trying add , remove row , column table dynamically.while i'm trying static contents code working fine. same thing i'm trying fetching data database , adding deleting row/column it's not working..added rows getting deleted value contains mysql row , column not getting deleted.

javascript:

//*********************************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);      // every row added 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);       // every row added add 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);        // every row added add textbox on rest of cells starting 3rd,4th,5th...  coloumns going on...     if (columncount >= 2) {         (var = 3; <= 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);       (var = 2; < 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;     (var = 0; < noofrows; i++) {         var row = tb.rows[i];         var chkbox = row.cells[0].childnodes[0];                    if (null != chkbox && 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;       (var clm = 3; clm < noofcolumns; clm++) {         var rw = tb.rows[0];          var chkbox = rw.cells[clm].childnodes[0];          console.log(clm, noofcolumns, chkbox);          if (null != chkbox && true == chkbox.checked) {              //-----------------------------------------------------             var lastrow = tb.rows;             (var x = 0; x < 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 last row index             // delete rows index greater 0      (i = lastrow; > 0; i--) {           tbl.deleterow(i);  //delete row    } }  //*****************************end delete selected columns **************************************************  //window.onload = function () {addcolumn();addcolumn();addcolumn();}; 

page:

<table width="30" border="1" id="tbl_sales">                       <tr>                           <td></td>                           <td><strong>columns</strong> </td>                           {php}                                 $j = 0;                                 for($i=0;$i<count($rows[0]);$i++)                                 {                                {/php}                           <td>                           {php} if($j == 0) { {/php}                                 <input type="button" name="adclmbutton" id="addclmnbutton" value="add columns" onclick="addcolumn()" />                             {php}}else{{/php}                                 <input type="checkbox" id="newcheckbox">                            {php}}{/php}                           </td>                            {php}$j++;}{/php}                         </tr>                         <tr>                           <td><strong>rows</strong> </td>                           <td><strong>rows grid</strong> </td>                           {php}                                 $j = 0;                                 for($i=0;$i<count($rows[0]);$i++)                                 {                                {/php}                           <td><input type="text" name="cols[]" value="{php} echo $rows[0][$i]; {/php}" id=""/></td>                           {php}}$i++;{/php}                         </tr>                         {php}                         $seats = $ci->model_theatre->convettable($m_arr);                         unset($seats[0]);                         $i = 0;                        foreach ($seats $rowname => $columns)                         {                       {/php}                         <tr >                           <td>                              {php} if($i == 0) { {/php}                                 <input type="button" name="addrowbutton" id="adrwbutton" value="add row" onclick="addrowtotable();"/>                             {php}}else{{/php}                                 <input type="checkbox" id="newcheckbox">                            {php}}{/php}</td>                           <td><input type="text" name="rows[]" value="{php}echo $rowname;{/php}" /></td>                             {php}                                 foreach ($columns $cell)                                  {                              {/php}                                 <td><label for="textfield"></label><input type="text" name="name[]" value="{php} echo $cell;{/php}" width="50px" /></td>                             {php}                                 }                             {/php}                             </tr>                         {php}                             $i++;                            }                         {/php}                      </table>                     {php}                         }                     {/php}  <p>                         <input type="button" name="button3" id="button3" value="remove selected row" onclick="deleteselectedrows()" />                         <input type="button" value="delete rows" onclick="deleteallrows()" />                         <input type="button" name="button4" id="button4" value="remove selected column" onclick="deleteselectedcoloumns()" />                       </p> 

when adding, deleting row need add, delete row in database using ajax call.