个人中心
gpt4 book ai didi

javascript - 使用 Javascript 删除 html 行和删除列按钮

转载 作者：可可西里 更新时间：2023-11-01 13:35:48 24 4
gpt4 key购买 nike

我正在努力实现如下图所示:

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>

最佳答案

改变这一行:

lastrow[x].deleteCell(clm);

到

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

同时删除分支

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

，那么它运行良好。 Tested it here.

关于javascript - 使用 Javascript 删除 html 行和删除列按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16748098/

24 4 0
文章推荐： html - LinkedIn 成员(member)资料插件
文章推荐： php - 如何通过安装脚本向 Magento 添加类别？
文章推荐： php - jquery 多选选中的数据顺序
文章推荐： html - 列表项未填充 ul 的宽度
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com