Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Select Cells in a table on mouseover

Posted on 2009-12-24
Medium Priority
Last Modified: 2012-05-08

I'm looking for a way to select cells in a grid when when mouse is over it.
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?


Question by:andre72
  • 2
  • 2
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26118398
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
	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;


		<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 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 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 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>

Open in new window


Expert Comment

ID: 26122327
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">
<title>Table Column Highlighting - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#theT {
border-top:3px groove silver;
border-right:3px groove silver;
#theT td {
border-left:3px groove silver;
border-bottom:3px groove silver;
<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;
        var tTab=document.getElementById('theT')
        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++)

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++)

<table id="theT" border="0" cellpadding="0" cellspacing="0">
<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>
<input type="button" value="clear highlighting" onClick="javascript:clearHighlighting()">

Open in new window


Author Comment

ID: 26123904
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?

Accepted Solution

siddagrl earned 2000 total points
ID: 26126267

that could implemented simply by assigning the proper start & end limits of i & j in function "hCol".

Attached is the updated version that does that.

Author Closing Comment

ID: 31669734
Thanks for your support!

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question