Mouse over effect, onclick select for alternate row colors table

A

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

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.id = i;

if (rows.className != 'table-header') {

//set up event handlers
if (rows.className != "selected") {
rows.onmousedown = selectRow;
rows.onmouseout = unhighliteRow;
rows.onmouseover = highliteRow;

//color in rows
if ((i % 2) == 0) {
rows.className = 'gray';
} else {
rows.className = 'white';
}

} else {
selectedRow = rows;
}
}
}
}


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

Richard Cornford

Amy wrote:
<!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">
Click to expand...

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

<style type="text/css">
<!--
Click to expand...
^^^^
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 {
Click to expand...
}

-->
Click to expand...
^^^
Likewise.

function resetRow(which) {
var changed = document.getElementById(which);
if(which%2)
Click to expand...

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.

<tr id="1" style="background-color: #DDEEFF"
Click to expand...
<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.
 
A

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.className == 'selected'){
//myTR.style.backgroundColor = 'red';
if(i%2)
selectedRow.className = 'white';
else
selectedRow.className = 'gray';
}
}
}
 
A

ASM

Amy a écrit :
I fixed that actually...
Click to expand...

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.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.onclick = function(){ selectRow(this); }
r.ondblclick = function(){ selectRow(this,1); }
if(IE) {
r.onmouseover = function(){ roll(this); }
r.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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Having trouble centering contents of td ? 3
Snowing Effect 2
Help with Visual Lightbox: Scripts 2
Filter table rows based on multiple checkboxes value 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Help needed with thank you message 5

Members online

No members online now.
Total: 1,003 (members: 0, guests: 1,003)
Robots: 35

Forum statistics

Threads
473,871
Messages
2,569,919
Members
46,172
Latest member
JamisonPat

Latest Threads

Top