Mouse over effect, onclick select for alternate row colors table

Amy

I need some help.
I have this table with alternate row colors. Class gray and class
white. I have javascript that do highlight when mouseover row ... and
onclick to select row and highlight it with another color. Also created
a class called "Selected". You can only select a row at a time.

My problem is, if a row is preselected, when mouseover the selected
row, the selected color is screwed. Until you click on the selected row
once, the behaviour is correct again.

Anyone can help me with this script? Thanks in advanced!

=============== =============== =============== ============
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<style type="text/css">

</style>
<script language="JavaS cript" type="text/javascript">
//<![CDATA[
var clicked = '';
//var currentRowId = '';
function rowOver(which, what) {
//alert(which);
var changed = document.getEle mentById(which) ;
//alert(changed);
if (which != clicked) {
if (what == 1)
changed.style.b ackgroundColor = '#D5DDE9';
else{
if(which%2)
changed.style.b ackgroundColor = '#ffffff';
else
changed.style.b ackgroundColor = '#CCCCCC';
}
}
}
function resetRow(which) {
var changed = document.getEle mentById(which) ;
if(which%2)
changed.style.b ackgroundColor = '#ffffff';
else
changed.style.b ackgroundColor = '#CCCCCC';
}
function changeSelect(wh ich) {
var changed = document.getEle mentById(which) ;
changed.style.b ackgroundColor = '#DDEEFF';
changed.onMouse Over = '';
changed.onMouse Out = '';
}
function selectRow(which ) { //,rowIndex
if (clicked != '') {
//alert('1');
resetRow(clicke d);
clicked = which;
changeSelect(wh ich);
} else if (clicked == '') {
//alert('2');
clicked = which;
changeSelect(wh ich);
}
//currentRowId = rowIndex;
}
function deSelectRow(whi ch) {
resetRow(which) ;
clicked = '';
}
//]]>
</script>
</head>

<body>
<table width="560" height="160" cellpadding="0" cellspacing="0"
border="0">
<tr>
<td class="rowBorde r" id="columnHeade r" style="width:
18%;padding: 2px; font-weight: bold; border-top: 1px solid
#666666;border-left: 1px solid #666666">
Col 1</td>
<td class="rowBorde r" id="columnHeade r" style="width:
26%;padding: 2px; font-weight: bold; border-top: 1px solid #666666">
Col 2</td>
<td class="rowBorde r" id="columnHeade r" style="width:
28%;padding: 2px; font-weight: bold; border-top: 1px solid #666666">
Col 3</td>
<td class="rowBorde r" id="columnHeade r" style="width:
28%;padding: 2px; font-weight: bold; border-top: 1px solid #666666">Col
4</td>
</tr>
<tr id="1" style="backgrou nd-color: #DDEEFF"
onmouseover="ro wOver('1',1); this.style.curs or='arrow'"
onmouseout="row Over('1',0)" onclick="select Row('1')"
ondblclick="deS electRow('1')">
<td class="rowBorde r" style="width: 18%;padding: 2px; text-align:
center;border-left: 1px solid #666666"">...</td>
<td class="rowBorde r" style="width: 26%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorde r" style="width: 28%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorde r" style="width: 28%;padding: 2px; text-align:
center;">...</td>
</tr>
<tr id="2" style="backgrou nd-color: #CCCCCC"
onmouseover="ro wOver('2',1); this.style.curs or='arrow'"
onmouseout="row Over('2',0)" onclick="select Row('2')"
ondblclick="deS electRow('2')">
<td class="rowBorde r" style="width: 18%;padding: 2px; text-align:
center;border-left: 1px solid #666666"">...</td>
<td class="rowBorde r" style="width:26 %;padding: 2px; text-align:
center;">...</td>
<td class="rowBorde r" style="width: 28%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorde r" style="width: 28%;padding: 2px; text-align:
center;">...</td>
</tr>
<tr id="3" style="backgrou nd-color: #FFFFFF"
onmouseover="ro wOver('3',1); this.style.curs or='arrow'"
onmouseout="row Over('3',0)" onclick="select Row('3')"
ondblclick="deS electRow('3')">
<td class="rowBorde r" style="width: 18%;padding: 2px; text-align:
center;border-left: 1px solid #666666"">...</td>
<td class="rowBorde r" style="width: 26%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorde r" style="width: 28%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorde r" style="width: 28%;padding: 2px; text-align:
center;">...</td>
</tr>
</table>

</body>
</html>

May 16 '06 #1

Subscribe Reply

19559

Walton

that's a lot of code... i think i'm following your issue. so i wrote
up a little something that's a little clearer (i think) to follow.

here's how i would solve the table highliting problem.

*note: if you want multiple tables per page, you'll need to come up
with a more clever method of "id"ing the rows. but you can use
something like this... I noticed you gave more than one element the
same id (i.e. id="columnHeade r"). you should be careful to avoid that
as it can potentially cause many problems further down the road.

*note: i've only tested this in FF and IE on pc
<html xmlns="http://www.w3.org/1999/xhtml"><head><t itle></title>

<style type="text/css">

table {
border-collapse: collapse;
cursor: default;
}

..selected {
background-color: #ddeeff;
}

..gray {
background-color: #cccccc;
}

..white {
background-color: #ffffff;
}

..highlited {
background-color: #D5DDE9;
}
</style>

<script type="text/javascript">

var selectedRow = false; //global that stores a ref. to selected row
element (can only be one selected at a time)

function initTable() {

var rows = document.getEle mentsByTagName( 'tr');
//get rid of first row (header)
for (var i = 0; i < rows.length; i++) {

rows[i].id = i;

if (rows[i].className != 'table-header') {

//set up event handlers
if (rows[i].className != "selected") {
rows[i].onmousedown = selectRow;
rows[i].onmouseout = unhighliteRow;
rows[i].onmouseover = highliteRow;

//color in rows
if ((i % 2) == 0) {
rows[i].className = 'gray';
} else {
rows[i].className = 'white';
}

} else {
selectedRow = rows[i];
}
}
}
}
function selectRow(evt) {
evt = (evt) ? evt : window.event;
var newRow = (evt.target) ? evt.target : evt.srcElement;
newRow = newRow.parentNo de;

//reset event handlers for row being unselected
selectedRow.onm ousedown = selectRow;
selectedRow.onm ouseout = unhighliteRow;
selectedRow.onm ouseover = highliteRow;

//erase event handlers for selected row
newRow.onmoused own = '';
newRow.onmouseo ut = '';
newRow.onmouseo ver = '';

//reset the row's color
if (parseInt(selec tedRow.id) % 2 == 0) {
selectedRow.cla ssName = 'gray';
} else {
selectedRow.cla ssName = 'white';
}

newRow.classNam e = "selected"; //select the row by changing its class
selectedRow = newRow;

}
function highliteRow(evt ) {
evt = (evt) ? evt : window.event;
var evtRow = (evt.target) ? evt.target : evt.srcElement;
evtRow = evtRow.parentNo de;
evtRow.classNam e = "highlited" ; //highlite the row by changing its
class

}
function unhighliteRow(e vt) {
evt = (evt) ? evt : window.event;
var evtRow = (evt.target) ? evt.target : evt.srcElement;
evtRow = evtRow.parentNo de;
//reset the row's color
if (parseInt(evtRo w.id) % 2 == 0) {
evtRow.classNam e = 'gray';
} else {
evtRow.classNam e = 'white';
}

}
</script>
</head>
<body onload="initTab le()">

<table border="1">
<tbody>
<tr id="0" class="table-header">
<th>Col1</th>

<th>Col2</th>
<th>Col3</th>
</tr>

<tr id="1" class="selected ">
<td>...
</td>

<td>...
</td>

<td>...
</td>
</tr>

<tr class="gray" id="2">
<td>...
</td>

<td>...
</td>

<td>...
</td>

</tr>

<tr class="white" id="3">
<td>...
</td>

<td>...
</td>

<td>...
</td>
</tr>
</tbody>
</table>
</body>
</html>

May 16 '06 #2

Richard Cornford

Amy wrote:
<snip>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
Is the really an XHTML document, or is it an HTML document with
inappropriate mark-up?

<snip> <style type="text/css">
 ^^^
Likewise.

<snip> function resetRow(which) {
var changed = document.getEle mentById(which) ;
if(which%2)
The rules that define the ID attribute preclude all values that would
make sense as an operand of the modulus operator. That is, an ID may not
start with a decimal digit, and so cannot be a representation of a
decimal number.

<snip> <tr id="1" style="backgrou nd-color: #DDEEFF"

<snip> ^^^

Which makes this ID attribute (and the similar others) the root of code
that should not be expected to work, and almost certainly is not
cross-browser even if you can find some browsers where the incorrect ID
attribute is tolerated.

Richard.

May 16 '06 #3

Amy

I fixed that actually...

This is what I changed / added :-

function rowOver(which, what) {
//alert(which);
var changed = document.getEle mentById(which) ;
//alert(changed);
if (which != clicked && changed.classNa me != 'selected') {
if (what == 1)
changed.style.b ackgroundColor = '#D5DDE9';
else{
if(which%2)
changed.style.b ackgroundColor = '#ffffff';
else
changed.style.b ackgroundColor = '#CCCCCC';
}
}
}

function selectRow(which ) { //,rowIndex
if (clicked != '') {
//alert('1');
resetRow(clicke d);
clicked = which;
changeSelect(wh ich);
checkSelected() ;
} else if (clicked == '') {
//alert('2');
clicked = which;
changeSelect(wh ich);
checkSelected() ;
}

}
function checkSelected() {
var selectedRow = document.getEle mentsByTagName( 'tr');
for (var i=0;i<selectedR ow.length;i++) {
if (selectedRow[i].className == 'selected'){
//myTR[i].style.backgrou ndColor = 'red';
if(i%2)
selectedRow[i].className = 'white';
else
selectedRow[i].className = 'gray';
}
}
}

May 17 '06 #4

ASM

Amy a écrit :

I fixed that actually...

I think you must work only with class names to be compatible with every
browser (each of them have its way to stock colors)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>highligh ts</title>

<style type="text/css" media="all">
table { width: 90%; margin: auto; border-collapse: collapse}
td { border: 1px solid black; cursor:pointer; text-align:center}
/* row 1 */
tr td { background: #ffc; }
tr:hover td, tr.ie td { background: #ff5; }
/* row 2 */
tr.bis td { background: #ddd; }
tr.bis:hover td, tr.bisie td { background: #ccc; }
/* selected row 1 */
tr.sel td { background: #CFC; }
tr.sel:hover td, tr.selie td { background: #9F9; }
/* selected row 2 */
tr.selbis td { background: #FCF; }
tr.selbis:hover td, tr.selbisie td { background: #F9F; }
</style>
<script type="text/javascript">
// detect IE
var IE = false; /*@cc_on IE=true; @*/
// rows
var r;
// 1 row on 2 are colored (by adding a class name)
function setRows(){
r = document.getEle mentsByTagName( 'TR');
for(var i=0;i<r.length; i++)
r[i].className = (i/2 != Math.round(i/2))? '':'bis';
}
// to select or unselect, adding or not, row
function selectRow(aRow, add){
var c = aRow.className;
if(add) setRows();
var b = aRow.className;
if(IE)
aRow.className =
b==''? 'selie' :
b=='bis'? 'selbisie' :
c=='selie'? 'ie' :
c=='ie'? 'selie' :
c=='bisie'? 'selbisie' :
c=='selbisie'? 'bisie' :
'';
else
aRow.className =
b==''||c==''? 'sel' :
b=='bis'||c=='b is'? 'selbis' :
c=='selbis'? 'bis' :
'';
}
// roll-over (only for IE)
function roll(what) {
var c = what.className;
what.className = c==''? 'ie' :
c=='bis'? 'bisie' :
c=='bisie'? 'bis' :
c=='selbis'? 'selbisie' :
c=='selbisie'? 'selbis' :
c=='selie'? 'sel' :
c=='sel'? 'selie' :
'';
}
// fire on loading
onload= function() {
setRows();
for(var i=0;i<r.length; i++) {
r[i].onclick = function(){ selectRow(this) ; }
r[i].ondblclick = function(){ selectRow(this, 1); }
if(IE) {
r[i].onmouseover = function(){ roll(this); }
r[i].onmouseout = function(){ roll(this); }
}
}
}

</script>
</head>
<body>
<p id="inf">click to add row to selection, double-click = only this row
selected, click a selected row to unselect</p>
<table summary="highli ghtting rows">
<tr>
<td>_Row_1_Cell _1_</td>
<td>_Row_1_Cell _2_</td>
<td>_Row_1_Cell _3_</td>
<td>_Row_1_Cell _4_</td>
</tr>
<tr>
<td>_Row_2_Cell _1_</td>
<td>_Row_2_Cell _2_</td>
<td>_Row_2_Cell _3_</td>
<td>_Row_2_Cell _4_</td>
</tr>
<tr>
<td>_Row_3_Cell _1_</td>
<td>_Row_3_Cell _2_</td>
<td>_Row_3_Cell _3_</td>
<td>_Row_3_Cell _4_</td>
</tr>
<tr>
<td>_Row_4_Cell _1_</td>
<td>_Row_4_Cell _2_</td>
<td>_Row_4_Cell _3_</td>
<td>_Row_4_Cell _4_</td>
</tr>
<tr>
<td>_Row_5_Cell _1_</td>
<td>_Row_5_Cell _2_</td>
<td>_Row_5_Cell _3_</td>
<td>_Row_5_Cell _4_</td>
</tr>
<tr>
<td>_Row_6_Cell _1_</td>
<td>_Row_6_Cell _2_</td>
<td>_Row_6_Cell _3_</td>
<td>_Row_6_Cell _4_</td>
</tr>
<tr>
<td>_Row_7_Cell _1_</td>
<td>_Row_7_Cell _2_</td>
<td>_Row_7_Cell _3_</td>
<td>_Row_7_Cell _4_</td>
</tr>
<tr>
<td>_Row_8_Cell _1_</td>
<td>_Row_8_Cell _2_</td>
<td>_Row_8_Cell _3_</td>
<td>_Row_8_Cell _4_</td>
</tr>
</table>
</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac

May 17 '06 #5

Similar topics

2509

alternate row colors - NOT in a DB

by: aznFETISH | last post by:

I have a list of links that I ue on my page, I alternate background colors for these links in a table, I usually do it using a DB but this list of link is manually added into the page so my question, is it possible to alternate the row colors automatic and have it created from a list of URL's?

PHP

6634

Datagrid control to change the row color on Mouse click event

by: karunakar | last post by:

Hi All, I want to deselect the row in DATAGRID. in ASP.NET application. I was alredy selected in datagrid row .I want to change another row in same datgrid . Here in my datagrid was selected in Multiple rows. when ever i select the particular row that time it can be selected .Next time i want to choose another datagrid row that time in My application first row also hilighted.(Here Multiple rows selected) that should not happen

ASP.NET

23945

OnClick function usage:

by: js2006 | last post by:

hello guys iam new to javascript so having some problems : please help me solving those: iam a bit struggling to Develop a web page using JavaScript. so need your a little help guys. TO DO: heading: “Select three different colors” • Declare three html forms each containing three radio buttons with Red Green Blue.

Javascript

1848

Alternate Colors - Cumulative

by: pradheepayyanar | last post by:

Dear All i have dynamic generation of <table> rt now i have done the <TR> with alternate colors which is a dynamic table. my requirement is that for every cumulative <tr> i need different color. ex. <table> <tr> <td>a</td><td>1</td> </tr> <tr> <td>b</td><td>2</td> </tr>

Javascript

3036

how is this done?? (select obj cool effect..)

by: maya | last post by:

http://www.msnbc.msn.com/id/16673873/site/newsweek/ pls scroll down, on the left, near the middle, there is a select object above which it says "Newsweek Business Directory".. how do they get the alternate background colors on the list? (I looked @ src code, couldn't find "<select" ) thank you..

HTML / CSS

6232

IE6 only display text when you mouse over it (!)

by: Edward | last post by:

IE6 only displays certain text on my site if you mouse over it (!). I reduced the HTML down to this code below which still shows this effect/bug. My temporary solution was to take out all the comments from my HTML. I reproduced this effect on two computers which use IE6. Why will IE6 not show the first line of text below when the page loads? To see this effect for yourself, view this page online at:

HTML / CSS

3140

Why do mouseup events sometimes fire if the mouse is not released?

by: markszlazak | last post by:

In the following script, a control displays (black box) in each table cell once you mouse over the cell. Mouse down on the control to change the mode of the table. Drag the mouse over cells in the same column then mouseup anywhere in a cell. The mouseup event sometimres fires before the selection of table cells by dragging is complete. It's important that I stop these "false" mouseup's from firing or distinguish them from when I let go of...

Javascript

3800

Mouse over effect

by: Chrisjc | last post by:

Good afternoon, I am seeking some help with a mouse over effect on an image... I have images that are 100x100 I would like to be able to mouse over them and it pull up a window showing that image in a larger format 400x400 I wanted to use this code here <?php $filein = 'help.html'; // ---------------------------------------- // Read help file into variable $help_text

ASP.NET

8996

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8832

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9388

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9333

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8256

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6800

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

4608

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4879

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2217

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General