Hi,
What I am trying to do here is to select number of cells in a table row then do something else on a click. The enclosed code is what's doing. From UI point of view, onmousedown is a better choice to select the cells instead of using mouseover, but the mousedown doesn't work in this code because the mousedown event can't be carried over to next cell. Any pointers? Thx in advance..
------------------------------------------------------------
<html>
<head>
<script>
var tableColumns;
var highlightColor;
var start = 0;
var finish = 0;
function tableInit ( columns, highlight )
{
tableColumns = columns;
highlightColor = highlight;
var column;
document.writeln('<TABLE border="0" cellpadding="0" cellspacing="0" ><TBODY>');
document.writeln('<TR >');
for ( column = 1; column <= columns; column++ )
{
document.writeln('<TD id="' + column + '" onmouseover="checkHighlight( this.id );" onclick="submitSelection( this.id );" width="35" height="35" style="background:silver;" >'+column+'</TD>');
}
document.writeln('</TR>');
document.writeln('<TR><TD id="tableSize1" align=left style="border:1px solid #808080" height="15"> 0 </TD>');
document.writeln('<TD align=center style="border:0px solid #808080" height="15"> - </TD>');
document.writeln('<TD id="tableSize2" align=right style="border:1px solid #808080" height="15"> 0 </TD></TR></TBODY></TABLE>');
}
function checkHighlight ( id )
{
var column;
var tmp_a;
var tmp_b;
if (start == 0 )
{
start = id;
}
finish = id;
tmp_a = parseInt(finish) <= parseInt(start) ? parseInt(finish)
arseInt(start)
tmp_b = parseInt(finish) > parseInt(start) ? parseInt(finish)arseInt(start)
for ( column = 1; column <= tableColumns; column++ )
{
document.getElementById( column ).style.backgroundColor = "silver";
}
for ( column = tmp_a==0 ? tmp_a+1: tmp_a; column <= tmp_b; column++ )
{
document.getElementById( column ).style.backgroundColor = highlightColor;
}
document.getElementById( 'tableSize1' ).innerHTML = tmp_a;
document.getElementById( 'tableSize2' ).innerHTML = tmp_b;
}
function submitSelection ( id )
{
var a, b;
a = start;
b = finish
start = 0;
finish = 0;
// Put whatever you want in here.
alert ( a + ' : ' + b);
}
tableInit ( 31, 'cyan' );
</script>
</head>
<body>
</body>
</html>
----------------------------------------------------------
What I am trying to do here is to select number of cells in a table row then do something else on a click. The enclosed code is what's doing. From UI point of view, onmousedown is a better choice to select the cells instead of using mouseover, but the mousedown doesn't work in this code because the mousedown event can't be carried over to next cell. Any pointers? Thx in advance..
------------------------------------------------------------
<html>
<head>
<script>
var tableColumns;
var highlightColor;
var start = 0;
var finish = 0;
function tableInit ( columns, highlight )
{
tableColumns = columns;
highlightColor = highlight;
var column;
document.writeln('<TABLE border="0" cellpadding="0" cellspacing="0" ><TBODY>');
document.writeln('<TR >');
for ( column = 1; column <= columns; column++ )
{
document.writeln('<TD id="' + column + '" onmouseover="checkHighlight( this.id );" onclick="submitSelection( this.id );" width="35" height="35" style="background:silver;" >'+column+'</TD>');
}
document.writeln('</TR>');
document.writeln('<TR><TD id="tableSize1" align=left style="border:1px solid #808080" height="15"> 0 </TD>');
document.writeln('<TD align=center style="border:0px solid #808080" height="15"> - </TD>');
document.writeln('<TD id="tableSize2" align=right style="border:1px solid #808080" height="15"> 0 </TD></TR></TBODY></TABLE>');
}
function checkHighlight ( id )
{
var column;
var tmp_a;
var tmp_b;
if (start == 0 )
{
start = id;
}
finish = id;
tmp_a = parseInt(finish) <= parseInt(start) ? parseInt(finish)
arseInt(start)tmp_b = parseInt(finish) > parseInt(start) ? parseInt(finish)
arseInt(start)for ( column = 1; column <= tableColumns; column++ )
{
document.getElementById( column ).style.backgroundColor = "silver";
}
for ( column = tmp_a==0 ? tmp_a+1: tmp_a; column <= tmp_b; column++ )
{
document.getElementById( column ).style.backgroundColor = highlightColor;
}
document.getElementById( 'tableSize1' ).innerHTML = tmp_a;
document.getElementById( 'tableSize2' ).innerHTML = tmp_b;
}
function submitSelection ( id )
{
var a, b;
a = start;
b = finish
start = 0;
finish = 0;
// Put whatever you want in here.
alert ( a + ' : ' + b);
}
tableInit ( 31, 'cyan' );
</script>
</head>
<body>
</body>
</html>
----------------------------------------------------------
