Solved

change of cell color

Posted on 2008-10-13
3
303 Views
Last Modified: 2011-04-14
i have a table with bluecolor background.
i want to navigate thru the cells using keyboard and as i move from td to td
i want the current focus td to be of color green. pl help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <body>
<table cellpadding="5" cellspacing="1" border="0">
	<tr bgcolor="#CCCCFF">
			<td tabIndex="1" width="150px" style="background-color:green">fsdfsd</td>
			<td tabIndex="2" width="150px">fsdfds</td>
			<td tabIndex="3" width="150px">fsdfsd</td>
			<td tabIndex="4" width="150px">hghfgh</td>
	</tr>
	<tr bgcolor="#CCCCFF">
			<td tabIndex="5" width="150px">fsdfsd</td>
			<td tabIndex="6" width="150px">fsdfds</td>
			<td tabIndex="7" width="150px">fsdfsd</td>
			<td tabIndex="8" width="150px">hghfgh</td>
	</tr>
 </body>
</html>

Open in new window

0
Comment
Question by:vidhubala
3 Comments
 
LVL 4

Accepted Solution

by:
sijishJohn earned 250 total points
ID: 22700781
try this...

HTML

<table cellpadding="5" cellspacing="1" border="0">
            <tr bgcolor="#CCCCFF">
                <td tabindex="1" width="150px" style="background-color: green" onfocus="Green(this);" onblur="Blue(this);">
                    fsdfsd</td>
                <td tabindex="2" width="150px" onfocus="Green(this);" onblur="Blue(this);">
                    fsdfds</td>
                <td tabindex="3" width="150px" onfocus="Green(this);" onblur="Blue(this);">
                    fsdfsd</td>
                <td tabindex="4" width="150px" onfocus="Green(this);" onblur="Blue(this);">
                    hghfgh</td>
            </tr>
            <tr bgcolor="#CCCCFF">
                <td tabindex="5" width="150px" onfocus="Green(this);" onblur="Blue(this);">
                    fsdfsd</td>
                <td tabindex="6" width="150px" onfocus="Green(this);" onblur="Blue(this);">
                    fsdfds</td>
                <td tabindex="7" width="150px" onfocus="Green(this);" onblur="Blue(this);">
                    fsdfsd</td>
                <td tabindex="8" width="150px" onfocus="Green(this);" onblur="Blue(this);">
                    hghfgh</td>
            </tr>
        </table>

SCRIPT

function Green(me)
    {
        me.style.backgroundColor="green";      
    }
   
    function Blue(me)
    {
        me.style.backgroundColor="#CCCCFF";        
    }
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 22701186
Hi, can I suggest a more efficient version?
<style>
#t1 tr { background-color:#CCCCFF }
#t1 td {width:150px}
.green {background-color: green; }
.blue {background-color: #CCCCFF; }
</style> 
<script>
window.onload=function() {
  var tb = document.getElementById('t1');
  for (var i=0;i<tb.rows.length;i++) {
    for (var j=0;j<tb.rows[i].cells.length;j++) {
     tb.rows[i].cells[j].onfocus=function() {this.className='green'}
     tb.rows[i].cells[j].onblur=function() {this.className='blue'}
    }
  }
  tb.rows[0].cells[0].focus();
}
</script>
<table id="t1" cellpadding="5" cellspacing="1" border="0">
            <tr>
                <td tabindex="1" class="green">
                    fsdfsd</td>
                <td tabindex="2">
                    fsdfds</td>
                <td tabindex="3">
                    fsdfsd</td>
                <td tabindex="4">
                    hghfgh</td>
            </tr>
            <tr>
                <td tabindex="5">
                    fsdfsd</td>
                <td tabindex="6">
                    fsdfds</td>
                <td tabindex="7">
                    fsdfsd</td>
                <td tabindex="8">
                    hghfgh</td>
            </tr>
        </table>

Open in new window

0
 

Author Closing Comment

by:vidhubala
ID: 31407044
thanks guys
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

713 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