473,724 Members | 2,284 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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

-->
</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
4 19556
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
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">
<!-- ^^^^
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.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

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

Similar topics

5
2508
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?
1
6633
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
4
23945
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.
1
1848
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>
3
3035
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..
9
6230
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:
2
3140
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...
16
3795
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 in a larger format 400x400 I wanted to use this code here <?php $filein = 'help.html'; // ---------------------------------------- // Read help file into variable $help_text
0
8868
marktang
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...
0
9389
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9243
jinu1996
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...
0
8063
agi2029
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...
0
5996
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4504
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...
0
4771
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3210
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2613
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.