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.dtd">
<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="JavaScript" type="text/javascript">
//<![CDATA[
var clicked = '';
//var currentRowId = '';
function rowOver(which, what) {
//alert(which);
var changed = document.getElementById(which);
//alert(changed);
if (which != clicked) {
if (what == 1)
changed.style.backgroundColor = '#D5DDE9';
else{
if(which%2)
changed.style.backgroundColor = '#ffffff';
else
changed.style.backgroundColor = '#CCCCCC';
}
}
}
function resetRow(which) {
var changed = document.getElementById(which);
if(which%2)
changed.style.backgroundColor = '#ffffff';
else
changed.style.backgroundColor = '#CCCCCC';
}
function changeSelect(which) {
var changed = document.getElementById(which);
changed.style.backgroundColor = '#DDEEFF';
changed.onMouseOver = '';
changed.onMouseOut = '';
}
function selectRow(which) { //,rowIndex
if (clicked != '') {
//alert('1');
resetRow(clicked);
clicked = which;
changeSelect(which);
} else if (clicked == '') {
//alert('2');
clicked = which;
changeSelect(which);
}
//currentRowId = rowIndex;
}
function deSelectRow(which) {
resetRow(which);
clicked = '';
}
//]]>
</script>
</head>

<body>
<table width="560" height="160" cellpadding="0" cellspacing="0"
border="0">
<tr>
<td class="rowBorder" id="columnHeader" style="width:
18%;padding: 2px; font-weight: bold; border-top: 1px solid
#666666;border-left: 1px solid #666666">
Col 1</td>
<td class="rowBorder" id="columnHeader" style="width:
26%;padding: 2px; font-weight: bold; border-top: 1px solid #666666">
Col 2</td>
<td class="rowBorder" id="columnHeader" style="width:
28%;padding: 2px; font-weight: bold; border-top: 1px solid #666666">
Col 3</td>
<td class="rowBorder" id="columnHeader" style="width:
28%;padding: 2px; font-weight: bold; border-top: 1px solid #666666">Col
4</td>
</tr>
<tr id="1" style="background-color: #DDEEFF"
onmouseover="rowOver('1',1); this.style.cursor='arrow'"
onmouseout="rowOver('1',0)" onclick="selectRow('1')"
ondblclick="deSelectRow('1')">
<td class="rowBorder" style="width: 18%;padding: 2px; text-align:
center;border-left: 1px solid #666666"">...</td>
<td class="rowBorder" style="width: 26%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorder" style="width: 28%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorder" style="width: 28%;padding: 2px; text-align:
center;">...</td>
</tr>
<tr id="2" style="background-color: #CCCCCC"
onmouseover="rowOver('2',1); this.style.cursor='arrow'"
onmouseout="rowOver('2',0)" onclick="selectRow('2')"
ondblclick="deSelectRow('2')">
<td class="rowBorder" style="width: 18%;padding: 2px; text-align:
center;border-left: 1px solid #666666"">...</td>
<td class="rowBorder" style="width:26%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorder" style="width: 28%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorder" style="width: 28%;padding: 2px; text-align:
center;">...</td>
</tr>
<tr id="3" style="background-color: #FFFFFF"
onmouseover="rowOver('3',1); this.style.cursor='arrow'"
onmouseout="rowOver('3',0)" onclick="selectRow('3')"
ondblclick="deSelectRow('3')">
<td class="rowBorder" style="width: 18%;padding: 2px; text-align:
center;border-left: 1px solid #666666"">...</td>
<td class="rowBorder" style="width: 26%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorder" style="width: 28%;padding: 2px; text-align:
center;">...</td>
<td class="rowBorder" style="width: 28%;padding: 2px; text-align:
center;">...</td>
</tr>
</table>

</body>
</html>

May 16 '06 #1

Subscribe Post Reply

19529

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="columnHeader"). 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><title></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.getElementsByTagName('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.parentNode;

//reset event handlers for row being unselected
selectedRow.onmousedown = selectRow;
selectedRow.onmouseout = unhighliteRow;
selectedRow.onmouseover = highliteRow;

//erase event handlers for selected row
newRow.onmousedown = '';
newRow.onmouseout = '';
newRow.onmouseover = '';

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

newRow.className = "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.parentNode;
evtRow.className = "highlited"; //highlite the row by changing its
class

}
function unhighliteRow(evt) {
evt = (evt) ? evt : window.event;
var evtRow = (evt.target) ? evt.target : evt.srcElement;
evtRow = evtRow.parentNode;
//reset the row's color
if (parseInt(evtRow.id) % 2 == 0) {
evtRow.className = 'gray';
} else {
evtRow.className = 'white';
}

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

<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.dtd">
<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.getElementById(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="background-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.getElementById(which);
//alert(changed);
if (which != clicked && changed.className != 'selected') {
if (what == 1)
changed.style.backgroundColor = '#D5DDE9';
else{
if(which%2)
changed.style.backgroundColor = '#ffffff';
else
changed.style.backgroundColor = '#CCCCCC';
}
}
}

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

}
function checkSelected() {
var selectedRow = document.getElementsByTagName('tr');
for (var i=0;i<selectedRow.length;i++) {
if (selectedRow[i].className == 'selected'){
//myTR[i].style.backgroundColor = '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>highlights</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.getElementsByTagName('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=='bis'? '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="highlightting 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

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

PHP

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

ASP.NET

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

Javascript

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

Javascript

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

HTML / CSS

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

HTML / CSS

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

Javascript

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

ASP.NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

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

General

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

Windows Server

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

Career Advice

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

Microsoft Access / VBA