Creating Table with Javascript abd Adding Events dynamically to each

[smartwebcoder]

Hiii All,
I am very new to Javascript, and this is only Google that Motivate me
to learn javascript, So I am posting my little javascript, which
creates Table dynamically and adds events to each cell , Over all I
have just tried to make this just like "Google Calender" given in
"Gmail" , I know I am very samm for all that stuff but still I
have tried it.

css Class:
<style type="text/css">
.tableOriginal
{
font-family:verdana;
font-size:10px;
width:100%;
border:solid 1px lightgray;
border-collapse: collapse;
height:500px;

}
.tbodyOriginal
{
font-family:verdana;
font-size:10px;

}
.tdNormal
{
font-family:verdana;
font-size:10px;
border-right:solid 1px lightgray;
border-bottom:solid 1px lightgray;
background-color:white;

}
.tdMouseOver
{
font-family:verdana;
font-size:10px;
border-right:solid 1px lightgray;
border-bottom:solid 1px lightgray;
background-color:yellow;
cursorointer;
}
</style>

/
********************************************************************************************************/
Javascript Part :

<script type="text/javascript">

var dragState = false;
var dragRow;
var startCell;
var endCell;

var cellNumbers;
var oldDraggedRow;
var row;
// **** events will be used on mouseevent ****
function dragStart(e)
{
var curElement = getEventTarget(e);
clearAll();
dragState = true;
startCell = curElement.cellIndex;
dragRow = curElement.parentNode.rowIndex; //Give the row
Index
dragged

highlight(startCell, startCell);
}

function mOver(e)
{
var curElement = getEventTarget(e);
if (dragState)
{
highlight(startCell, curElement.cellIndex);
//cancelEvent(e);
}
}

function dragEnd(e)
{
if (dragState)
{
dragState = false;

}

}

function highlight(start, end)
{

if (dragState)
{
row =
document.getElementById("synCalender").getElementsByTagName("tr")
[dragRow];

if (row)
{
clearHighlight();
var cells = row.getElementsByTagName("td");

for (var x=Math.min(start,end); x <=
Math.max(start,end); x+
+)
{
cells[x].style.backgroundColor =
"Yellow";
cellNumbers += x+"-";

}
}
oldDraggedRow = row.rowIndex;
}

}

/***************************Code Not In
Use*********************************/
//Creating Cookies for Saving old row Selected
function eraseCookie()
{
createCookie(OldRowSelected,"",-1);
}
function createCookie(value)
{
document.cookie = "OldRow="+value;
}
/
***************************************************************************/

//Highlight Functions
function clearHighlight()
{

var row =
document.getElementById("synCalender").getElementsByTagName("tr")
[dragRow];
if (row)
{
var cells = row.getElementsByTagName("td");
for (var x=0; x < cells.length; x++)
{
cells[x].style.backgroundColor = "white";
}
}
}

//**************Code to Clear Previous
Selection***************************//
function clearAll(start, end)
{
var rowCount =
document.getElementById('synCalender').rows.length;
var rows =
document.getElementById("synCalender").getElementsByTagName("tr")
[dragRow];

if (rows)
{
var rowcells = rows.getElementsByTagName("td");
for (var y=1;y<=rowCount;y++)
{
for (var x=0; x < rowcells.length; x++)
{
rowcells[x].style.backgroundColor =
"white";

}
}
}

}
//**************Code to Clear Previous
Selection***************************//

/
**************************************************************************************/
//General Function to remove the SetAttribute Problem

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}

//returns the object that received the event in a browser neutral
manner
function getEventTarget(e)
{
if (window.event && window.event.srcElement)
{
return window.event.srcElement;
}
if (e && e.target)
{
return e.target;
}
return null
}

/
**************************************************************************************/

function Createtable(obj,id)
{
var tar=document.getElementById(id);
for (var i=0;i<obj.selectedIndex;i++)
{
var l=1;
var table=document.createElement('TABLE');
table.border='1';
table.id="synCalender";
table.setAttribute(document.all ? "className" :
"class","tableOriginal");
//table.class="tableOriginal";
//_setStyle(table, 'class:tableOriginal;');
var tbdy=document.createElement('TBODY');
tbdy.setAttribute(document.all ? "className" :
"class","tbodyOriginal");
//_setStyle(tbdy, 'class:tbodyOriginal;');
// tbdy.class="tbodyOriginal";
table.appendChild(tbdy);
for (var j=0;j<5;j++)
{
var tr=document.createElement('TR');
tbdy.appendChild(tr);
for (var k=0;k<6;k++)
{

var td=document.createElement('TD');
td.width='100';
td.id = l;

td.setAttribute("onmouseover","this.className='tdMouseOver';"); //
Firefox

td.setAttribute("onmouseout","this.className='tdNormal';"); //Firefox
td.setAttribute("onclick","PickInfo("+l+");"); //
Firefox
td.appendChild(document.createTextNode(td.id));
tr.appendChild(td);
l++;

}
}
tar.appendChild(table);
}
//Assign the behaviors
var theTable = document.getElementById("synCalender");
var tds = theTable.getElementsByTagName("td");

for (var x=0; x < tds.length; x++)
{
if (tds[x].id.length > 0)
{
addEvent(tds[x], 'mousedown', dragStart, false);
addEvent(tds[x], 'mousemove', mOver, false);
addEvent(tds[x], 'mouseup', dragEnd, false);

}
}

}

</script>

/
**************************************************************************************************/
HTML Part :

<select onchange="Createtable(this,'target');">
<option>Select No Of Rows</option>
<option>1</option>
<option>2</option>

</select>
<input type="button" id="btnRefresh" value="Refresh"
onclick="javascript:window.location.reload(true);" />

<div id="target">
</div>
/
**************************************************************************************************/

Please feel free to find out Bugs in this script...