javascript - 使用Javascript动态删除html行和删除列

Question

我正在尝试动态地从表中添加和删除行和列。当我尝试使用静态内容时，我的代码工作正常。同样的事情，我正在尝试从数据库获取数据并添加删除行/列，但它不起作用。添加的行被删除，但值包含来自 mysql 行和列的内容未被删除。

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);

    // 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 >= 2) {
        for (var i = 3; i <= 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 < 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 < 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; 

    for (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;
            for (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 the last row index           
 // delete rows with index greater then 0    
 for (i = lastRow; i > 0; i--) {        
  tbl.deleteRow(i);  //delete the row  
 }
} 
//*****************************End Delete Selected Columns **************************************************

//window.onload = function () {addColumn();addColumn();addColumn();};

页面:

<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 as $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 as $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 all rows" onClick="deleteAllRows()" />
                        <input type="button" name="button4" id="button4" value="Remove Selected Column" onClick="deleteSelectedColoumns()" />
                      </p>

Answer 1

当您添加、删除行时，您还需要使用 AJAX 调用在数据库中添加、删除该行。