473,287 Members | 1,689 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

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">
<!--
..rowBorder {
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
}

table{
font-family: verdana;
font-size: 8pt;
}

-->
</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
4 19519
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
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">
<!-- ^^^^
If it is XHTML you should not be doing that as XML parsers are allowed
to remove mark-up comments, so you may be commenting out your style
element contents (and this is the start of a mark-up comment in XHTML
because the XHTML content type for STYLE is PCDATA (as opposed to the
CDATA that applies to HTML STYLE elements)).
.rowBorder { <snip> }

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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
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...
1
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...
4
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: ...
1
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....
3
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...
9
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...
2
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...
16
Chrisjc
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...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.