asked on

Select Cells in a table on mouseover

Hi,

I'm looking for a way to select cells in a grid when when mouse is over it.
Eg.:
The user clicks on a cell and that is the start cell.
Now while mouse move the cells where the mouse is over will become hightlight and when the user clicks again the current cell will be the end cell.

I hope you can understand what I try to explain :-)
Any sample how this is possible?

Thanks

Andre

Gurvinder Pal Singh

Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
	var firstCell = 0;
	var lastCell = 0;
	//var mouseDown

	function updateMouseDown(obj)
	{
		firstCell = obj.id;
	}

	function updateMouseUp(obj)
	{
		lastCell = obj.id;
		alert("it started from " + firstCell + " till " + lastCell );
		firstCell = 0;
		lastCell = 0;
	}

</script>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
	<table>
		<tr id='tr1'>
			<td id='td11' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>1</td>
			<td id='td12' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>2</td>
			<td id='td13' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>3</td>
			<td id='td14' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>4</td>
			<td id='td15' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>5</td>
			<td id='td16' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>6</td>
		</tr>
		<tr id='tr2'>
			<td id='td21' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>1</td>
			<td id='td22' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>2</td>
			<td id='td23' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>3</td>
			<td id='td24' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>4</td>
			<td id='td25' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>5</td>
			<td id='td26' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>6</td>
		</tr>
		<tr id='tr3'>
			<td id='td31' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>1</td>
			<td id='td32' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>2</td>
			<td id='td33' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>3</td>
			<td id='td34' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>4</td>
			<td id='td35' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>5</td>
			<td id='td36' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>6</td>
		</tr>
		<tr id='tr4'>
			<td id='td41' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>1</td>
			<td id='td42' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>2</td>
			<td id='td43' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>3</td>
			<td id='td44' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>4</td>
			<td id='td45' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>5</td>
			<td id='td46' onmouseup='updateMouseUp(this)' onmousedown='updateMouseDown(this)'>6</td>
		</tr>
	</table>
</BODY>
</HTML>

Open in new window

siddagrl

I think you are looking something like this. (attached)

I have modified the code of "jscheuer1" from "http://www.dynamicdrive.com/forums/archive/index.php/t-11390.html"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Table Column Highlighting - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#theT {
width:80%;
border-top:3px groove silver;
border-right:3px groove silver;
}
#theT td {
border-left:3px groove silver;
border-bottom:3px groove silver;
}
</style>
<script type="text/javascript">
/* Highlight Table Columns © John Davenport Scheuer
* As first seen in http://www.dynamicdrive.com/forums/
* This notice must remain for legal use */

var useHighlighting = false;
var i_start = 0;
var j_start = 0;

function toggleHighlighting(i, j){
    if (useHighlighting)
        useHighlighting = false;
    else
    {
        clearHighlighting();
        var tTab=document.getElementById('theT')
        tTab.rows[i].cells[j].style.backgroundColor='yellow';
        i_start = i;
        j_start = j;
        useHighlighting = true;
    }
}

function hCol(i, j, clr){
    if (useHighlighting){
        var tTab=document.getElementById('theT')
        for (var i_tem = i_start; i_tem <= i; i_tem++)
            for (var j_tem = j_start; j_tem <= j; j_tem++)
                tTab.rows[i_tem].cells[j_tem].style.backgroundColor=clr;
    }
}

function eCol(){
    var tTab=document.getElementById('theT')
    for (var i_tem = 0; i_tem < tTab.rows.length; i_tem++)
        for (var j_tem = 0; j_tem < tTab.rows[i_tem].cells.length; j_tem++){
            tTab.rows[i_tem].cells[j_tem].onmouseover=new Function("hCol("+i_tem+", " + j_tem + ", 'yellow');");
            tTab.rows[i_tem].cells[j_tem].onmouseout=new Function("hCol("+i_tem+", "+ j_tem + ", '');");
            tTab.rows[i_tem].cells[j_tem].onclick=new Function("toggleHighlighting("+i_tem+", "+ j_tem + ");");
        }
}

function clearHighlighting(){
    var tTab=document.getElementById('theT')
    for (var i_tem = 0; i_tem < tTab.rows.length; i_tem++)
        for (var j_tem = 0; j_tem < tTab.rows[i_tem].cells.length; j_tem++)
            tTab.rows[i_tem].cells[j_tem].style.backgroundColor='';
}

onload=eCol;
</script>
</head>
<body>
<table id="theT" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> </tr>
<tr> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> </tr>
<tr> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> </tr>
<tr> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> </tr>
<tr> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> </tr>
<tr> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> </tr>
<tr> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> </tr>
<tr> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> <td><br> </td> </tr>
</tbody>
</table>
<br>
<input type="button" value="clear highlighting" onClick="javascript:clearHighlighting()">
</body>
</html>

Open in new window

Table-Highlighting.html

andre72

ASKER

Yes siddagrl this is exact what I'm looking for.
But why does it only work in the # direction down and right?

After start selection mouse move to the left or up it does not select any more?

ASKER CERTIFIED SOLUTION

siddagrl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

andre72

ASKER

Thanks for your support!