4

私は下の写真のように達成しようとしています:

ここに画像の説明を入力

「選択した列の削除」を正しく取得していないようで、選択した行も削除します。代わりに、すべての行とすべての列を削除しています。

これまでのところ、次のコードがあります。

<!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>
4

3 に答える 3

1

この行を変更します。

lastrow[x].deleteCell(clm);

に

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

また、ブランチを削除します

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

、それはうまくいきます。ここでテストしました。

于 2013-05-25T12:11:32.977 に答える
1

deleteSelectedColumns 関数は、選択されていない列を渡した後に常に戻ります。

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

たとえば、最初の列が選択されていない場合、他の列は表示されません。

また、送信ボタンを使用して関数をトリガーしています。これらを押すとページが更新され (元の状態にリセットされ)、すべての行と列が削除されたように見えます。使ってみて

<input type="button" />

代わりは。

于 2013-05-25T10:10:29.313 に答える