i am trying to achieve like the pic below.
i don't seem to get the "delete selected column" right and also Delete selected row. instead the are deleting all rows and all columns.
so far i have the following code.
<!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>
