Select Cells in a table on mouseover

Posted on 2009-12-24
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
    LVL 40

    Expert Comment

    Try this

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    	var firstCell = 0;
    	var lastCell = 0;
    	//var mouseDown
    	function updateMouseDown(obj)
    		firstCell =;
    	function updateMouseUp(obj)
    		lastCell =;
    		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

    LVL 5

    Expert Comment

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

    I have modified the code of "jscheuer1" from ""
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
    <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
    * 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

    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?
    LVL 5

    Accepted Solution


    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

    Thanks for your support!

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now