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

19429

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

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

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

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

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

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

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

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

ASP.NET

Tips for Saving Money on Buying a Gaming Laptop

by: tammygombez | last post by:

Hey everyone! I've been researching gaming laptops lately, and I must say, they can get pretty expensive. However, I've come across some great...

Computer Hardware

The Top 5 Skills You Need in a PowerApps Developer

by: concettolabs | last post by:

In today's business world, businesses are increasingly turning to PowerApps to develop custom business applications. PowerApps is a powerful tool...

.NET Framework

Discuss your understanding of the Java platform.

by: better678 | last post by:

Question: Discuss your understanding of the Java platform. Is the statement "Java is interpreted" correct? Answer: Java is an object-oriented...

General

How to minimize a tool bar that shows up when in reports

by: CD Tom | last post by:

This happens in runtime 2013 and 2016. When a report is run and then closed a toolbar shows up and the only way to get it to go away is to right...

General

how to collapse a custom toolbar in VBA

by: CD Tom | last post by:

This only shows up in access runtime. When a user select a report from my report menu when they close the report they get a menu I've called Add-ins...

General

Basic concepts of WebLogic Admin training?

by: Naresh1 | last post by:

What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...

Oracle Database

Hyperconverged All-in-One Streaming Engine, ushering in new age for distributed database

by: antdb | last post by:

Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was...

General

How to layout php header location with a variable as the location?

by: Matthew3360 | last post by:

Hi there. I have been struggling to find out how to use a variable as my location in my header redirect function. Here is my code. ...

PHP

How to use http requests (Get function) to get variable value?

by: Matthew3360 | last post by:

Hi, I have a python app that i want to be able to get variables from a php page on my webserver. My python app is on my computer. How would I make it...

Python