Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

Mouse over effect, onclick select for alternate row colors table

Amy
Guest
  
Posts: n/a
#1: May 16 '06
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>
Walton
Guest
  
Posts: n/a
#2: May 16 '06

re: Mouse over effect, onclick select for alternate row colors table

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>
Richard Cornford
Guest
  
Posts: n/a
#3: May 16 '06

re: Mouse over effect, onclick select for alternate row colors table

Amy wrote:
<snip>[color=blue]
> <!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">[/color]

Is the really an XHTML document, or is it an HTML document with
inappropriate mark-up?

<snip>[color=blue]
> <style type="text/css">
> <!--[/color]
^^^^
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)).
[color=blue]
> .rowBorder {[/color]
<snip>[color=blue]
> }
>
> -->[/color]
^^^
Likewise.

<snip>[color=blue]
> function resetRow(which) {
> var changed = document.getElementById(which);
> if(which%2)[/color]

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>[color=blue]
> <tr id="1" style="background-color: #DDEEFF"[/color]
<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.
Amy
Guest
  
Posts: n/a
#4: May 17 '06

re: Mouse over effect, onclick select for alternate row colors table

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';
}
}
}
ASM
Guest
  
Posts: n/a
#5: May 17 '06

re: Mouse over effect, onclick select for alternate row colors table

Amy a écrit :[color=blue]
> I fixed that actually...[/color]

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
Closed Thread

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,223 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved