Question

我正在努力实现如下图片。 enter image description here 我似乎没有得到“删除选定列”权限，也删除所选行。而是删除所有行和所有列。

到目前为止，我有以下代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
//*********************************Start Add Row **********************************************************
function addRowToTable(){
  var tbl = document.getElementById('tbl_sales');     //html table
  var columnCount =  tbl.rows[0].cells.length;        //no. of columns in table 
  var rowCount = tbl.rows.length;                     //no. of rows in table 
  var row = tbl.insertRow(rowCount);                  //insert a row method

    // For Every Row Added a Checkbox on first cell--------------------------------------
  var cell_1 = row.insertCell(0);                     //Create a new cell
  var element_1 = document.createElement("input");    //create a new element
  element_1.type = "checkbox";                        //set element type
  element_1.setAttribute('id','newCheckbox');         //set id attribute
  cell_1.appendChild(element_1);                      //Append element to created cell

  // For Every Row Added add a Select box on Second cell------------------------------
  var cell_2 = row.insertCell(1);
  var element_2 = document.createElement('select');
  element_2.name = 'SelDist' + rowCount;
  element_2.options[0] = new Option('John Doe', 'value0');
  element_2.options[1] = new Option('Dane Doe', 'value1');
  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){  //Add cells for more than 2 columns
      for (var i=3; i<=columnCount; i++) {
              var newCel = row.insertCell(i-1); //create a new cell           
              var element_3 = document.createElement("input");            
              element_3.type = "text"; 
              element_3.setAttribute('id', 'newInput'); //set the id attribute     
              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('select');
        element_5.name = 'SelProd' + rowCount;
        element_5.options[0] = new Option('Product11', 'value0');
        element_5.options[1] = new Option('Product12', 'value1');
        element_5.options[2] = new Option('Product13', 'value2');
        element_5.options[3] = new Option('Product14', 'value3');
        element_5.options[4] = new Option('Product15', 'value4');
        element_5.options[5] = new Option('Product16', 'value5');
        newselectboxcell.appendChild(element_5);

        // For Every Coloumn Added add a textbox on the rest of the row cells starting with the 3rd,4th,5th......  
         for (var i=2; i< tblBodyObj.rows.length; i++) { //Add cells in all rows starting with 3rd row
              var newCell = tblBodyObj.rows[i].insertCell(-1); //create new cell
              var element_6 = document.createElement("input");
              element_6.type = "text"
              element_6.setAttribute('id', 'Newinput');
              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]; //get check box object               
  if(null != chkbox && true == chkbox.checked) { //wheather check box is selected                   
   tb.deleteRow(i); //delete the selected row                    
   NoOfrows--; //decrease rowcount by 1                   
   i--;               
  }             
 }
}
//*****************************End Delete Selected Columns **************************************************
//*****************************Start Delete Selected Columns ************************************************
function deleteSelectedColoumns() 
{
    var tb = document.getElementById('tbl_sales');//html table
    var NoOfcolumns =  tb.rows[0].cells.length; //no. of columns in table 
        for (var clm=3; clm< NoOfcolumns; clm++)
        {
             var rw = tb.rows[0];
             var chkbox = rw.cells[clm].childNodes[0];
                if(null != chkbox && true == chkbox.checked)
                { 
                    //-----------------------------------------------------
                    var lastrow = document.getElementById('tbl_sales').rows;
                    for (var x=0; x< lastrow.length; x++)
                    {
                        lastrow[x].deleteCell(clm);

                    }
                    //----------------------------------------- 
                    NoOfcolumns--;
                    clm--;  
                }else
                { 
                alert ("not selected");
                return;
                }
        }

}
//*****************************End Delete Selected Columns **************************************************
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Distributor Sales</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table width="30" border="1" id="tbl_sales">
  <tr>
    <td></td>
    <td><strong>Products</strong></td>
    <td><input type="button" name="adclmbutton" id="addclmnbutton" value="Add Product" onclick="addColumn()" /></td>
    </tr>
  <tr>
    <td><strong>Distributors</strong></td>
    <td><strong>Sales Grid</strong></td>
    <td><select name="select3" id="select">
      <option>Product 1</option>
      <option>Product 2</option>
      <option selected="selected">Product 3</option>
    </select></td>
    </tr>
  <tr>
    <td><input type="button" name="addrowbutton" id="adrwbutton" value="Add Distributor" onclick="addRowToTable();"/></td>
    <td><select name="select6" id="select6">
      <option selected="selected">Jhon Doe</option>
      <option>Jane Doe</option>
      <option>David</option>
      <option>Kelvin</option>
      </select></td>
    <td><label for="textfield"></label>
      <input type="text" name="textfield" id="textfield" width="50px" /></td>
  </tr>
  </table>
<p>
  <input type="submit" name="button3" id="button3" value="Remove Selected Distributor" onClick="deleteSelectedRows()"/>
  <input type="submit" name="button4" id="button4" value="Remove Selected Product" onClick="deleteSelectedColoumns()"/>
</p>
</form>
</body>
</html>

Answer 1

您的deleteSelectedColumns函数将在传递未选中的列后始终返回：

/*...*/
if(null != chkbox && true == chkbox.checked)
{
  /*...*/
}else
  alert ("not selected");
  return;
}

例如，如果未选择第一列，则不会查看其他列。

您还使用提交按钮来触发您的功能。这些将在按下时刷新页面（将其重置为原始状态），给人的印象是所有行和列都已删除。尝试使用

<input type="button" />

代替。

Answer 2

更改此行：

lastrow[x].deleteCell(clm);

到

tb.rows[x].deleteCell(clm);

并删除分支

//} else { alert ("not selected"); return; }

，然后效果很好。 Tested it here.

Answer 3

如果表是静态的，那么您可以使用以下内容删除第一个，最后一列：

int touchX, touchY;
int centerObjX, centerObjY;
int rayon;

int distX = centerObjX - touchX; // the sens don't matter
int distY = centerObjY - touchY; 
if (distX*distX + distY*distY<rayon*rayon) // squared distance
{
    // touch in the circle
}

使用Javascript删除html Row和Delete Column按钮

3 个答案: