guys so far i hav this much code done . and i need your further assistance
[HTML]<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Dynamic Table</title>
<meta name="Author" content="Chandra Vedantham">
<meta name="Description" content="Html Page">
<script>
var DEFAULT_WIDTH = 100;
var DEFAULT_HEIGHT = 100;
var tmpCell=null;
var tmprow=null;
function CreateTable(rowCount, colCount, srcHolder)
{
if(IsValidNumber(rowCount) && IsValidNumber(colCount) && (srcHolder != null) && (srcHolder.canHaveChildren))
{
srcHolder.innerHTML = "";
srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "Black";
srcTable.height = DEFAULT_HEIGHT;
srcTable.width = DEFAULT_WIDTH;
tmpRow = null;
tmpCell = null;
srcHolder.appendChild(srcTable);
for(i=0; i<parseInt(rowCount)+1; i++)
{
tmpRow = AppendRow(srcTable)
for(j=0; j<parseInt(colCount)+1; j++)
{
tmpCell = AppendCell(tmpRow);
tmpCell .innerText=i+','+j;
tmpCell.id = i+','+j;
aa=tmpCell.id;
if(i==0 || j==0)
{
GetIndex= i+','+j;
TempSp=GetIndex.split(',');
Sp1=TempSp[0];
Sp2=TempSp[1];
srcTable.rows[0].cells[Sp2].innerText=Sp2;
srcTable.rows[Sp1].cells[0].innerText=Sp1;
}
else
{
tmpCell.onmouseover = function()
{
OnMouseOv(srcTable,tmpRow,this,rowCount,colCount);
//alert("Sp1.."+Sp1);
//alert("Sp2.."+Sp2);
}
tmpCell.onmouseout=function()
{
OnMouseOuts(srcTable,tmpRow,this,rowCount,colCount );
}
}
tmpCell = null;
}
}
tmpRow = null;
}
}
function AppendRow(srcTable)
{
if(srcTable != null)
{
return srcTable.insertRow();
}
else
{
alert("Error while creating table. Cause: Container Table is null!");
}
}
function AppendCell(srcRow)
{
if(srcRow != null)
{
return srcRow.insertCell();
}
else
{
alert("Error while creating table. Cause: Container row is null!");
}
}
function IsValidNumber(ipNum)
{
if(isNaN(ipNum))
{
alert("Invalid Number!");
return false;
}
else if(ipNum < 1)
{
alert("Number should be greater than 0!");
return false;
}
else
{
return true;
}
}
function OnMouseOv(srcTable,tmpRow,tmpCell,NoRows,NoCols)
{
tmpCell.style.fontSize ="20";
tmpCell.style.backgroundColor="red"
var TempSp=tmpCell.id.split(',');
Sp1=TempSp[0];
Sp2=TempSp[1];
//To clear the color of the Table cells
ClearColor(srcTable,NoRows,NoCols);
//Sets the Color of First cell of Row and Column To Green
srcTable.rows[Sp1].cells[0].style.backgroundColor ="Green";
srcTable.rows[0].cells[Sp2].style.backgroundColor ="Green";
}
index=0;
function OnMouseOuts(srcTable,tmpRow,tmpCell,NoRows,NoCols)
{
tmpCell.style.fontSize ="";
if(index==0)
{
prev_n=Sp1;
prev_m=Sp2;
srcTable.rows[Sp1].cells[Sp2].style.backgroundColor ="yellow";
index++;
}
else if(index==1)
{
srcTable.rows[Sp1].cells[Sp2].style.backgroundColor ="yellow";
srcTable.rows[prev_n].cells[prev_m].style.backgroundColor ="white";
prev1_n=Sp1;
prev2_m=Sp2;
index=2;
}
else if(index==2)
{
srcTable.rows[Sp1].cells[Sp2].style.backgroundColor ="yellow";
srcTable.rows[prev1_n].cells[prev2_m].style.backgroundColor ="white";
prev_n=Sp1;
prev_m=Sp2;
index=1;
}
ClearColor(srcTable,NoRows,NoCols);
}
function ClearColor(srcTable,NoRows,NoCols)
{
//alert("clear");
var i = 0;
var j = 0;
for( i=0;i<parseInt(NoRows)+1;i++)
{
srcTable.rows[i].cells[0].style.backgroundColor = 'white';
}
for( j=0;j<parseInt(NoCols)+1;j++)
{
srcTable.rows[0].cells[j].style.backgroundColor = 'white';
}
}
</script>
</head>
<body>
<table>
<tr>
<td>No. Of Rows: </td>
<td><input type=text id="txtRows" name=txtRows1 /></td>
</tr>
<tr>
<td>No. Of Columns: </td>
<td><input id="txtCols" type=text name=txtCols1 /> </td>
</tr>
<tr>
<td colspan=2 align=right><input type=button name=cmdCreate
value="Create Table" onClick="CreateTable(txtRows.value, txtCols.value,
divHolder)" /></td>
</tr>
</table>
<div id=divHolder>
</div>
</body>
</html>[/HTML]
8
