HTML Programming
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > HTML Programming
Reload this Page

table row background colour

Discuss table row background colour in the HTML Programming forum on Dev Shed.
table row background colour HTML Programming forum covering discussions of HTML and XHTML, as well as HTML-related issues such as writing W3C Compliant code. Use HyperText Markup Language for building websites.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old July 17th, 2000, 04:00 PM
Oliver Smith Oliver Smith is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 6 Oliver Smith User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
I have a table which I want to make so that any line that currently has the mouse over gets a specific colour, but since I use multiple colours for my rows, I'd want it restored, any suggestions on how to do this? I'm having a little hassle figuring this out (maybe I'm just tired =P)

<TR BGCOLOR="..." onMouseOver="trMouseOver(this);" onMouseOut="trMouseOut(this);"> ...

And the script

var lastColor;
function trMouseOver(obj) {
lastColor = obj.style.backgroundColor;
obj.style.backgroundColor = 'white';
}
function trMouseOut(obj) {
obj.style.backgroundColor = lastColor;
}

Ol
Reply With Quote
  #2  
Old July 17th, 2000, 04:16 PM
Oliver Smith Oliver Smith is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 6 Oliver Smith User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
As a PS...

One problem with the particular method I've included, is that for a table with a LOT of rows it adds a LOT to the document. I was hoping their might be a better way to do it

The tables are generated from a database using PHP, so if there is a simpler way to do it which is just tedious codewise (e.g. giving every TR an ID or something) that's fine.
Reply With Quote
  #3  
Old July 17th, 2000, 10:24 PM
r-c r-c is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Location: Auckland, New Zealand
Posts: 9 r-c User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to r-c
Your code to swap the colours works fine in IE5?

An alternative to rewriting the onmouse.. bits could be to send in the data from php or whatever to an array in javascript and just make a loop to create the table based on your array.. umm heres a basic example to what i'm trying to say...

<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>
<body> <script> mktab(); </script> </body>
[/code]
script to highlight rows:
<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>
var x;
function over(obj) {
x = obj.style.backgroundColor;
obj.style.backgroundColor = 'white';
}
function out(obj) {
obj.style.backgroundColor = x;
}
[/code]
script to mk table:
<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>
function mktab() {
_w('<table border=1>');
for (key in row_array) _w('<tr onmouseover="over(this);" onmouseout="out(this);" bgcolor=' + col_array[key] + '><td>' + row_array[key] + '</td>');
_w('</table>');
}
function _w(y) { document.writeln(y); }
[/code]
and finally send some data from php into a couple of arrays to populate table & give colours to make rows or something eg:
<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>
var row_array = new Array('one','two','three');
var col_array = new Array('red','green','blue');
[/code]

hope that helps :]

ravikesh
Reply With Quote
  #4  
Old July 17th, 2000, 11:40 PM
JKB JKB is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Location: Roseburg, OR, USA
Posts: 23 JKB User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
hi Oliver, there is a way to do this using IDs and CLASS with CSS... here is an example below:

<HTML>
<HEAD>
<TITLE>ack</TITLE>

<style>

.COLD
{
background-Color:blue;
color:red;
}

.HOT
{
background-Color:red;
color:blue;
}

</style>

</HEAD>

<BODY bgcolor="000000">

<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td ID="TD1" CLASS="COLD" onmouseover="TD1.className='HOT'" onmouseout="TD1.className='COLD'">cell1</td>
<td ID="TD2" CLASS="COLD" onmouseover="TD2.className='HOT'" onmouseout="TD2.className='COLD'">cell2</td>
<td ID="TD3" CLASS="COLD" onmouseover="TD3.className='HOT'" onmouseout="TD3.className='COLD'">cell3</td>
<td ID="TD4" CLASS="COLD" onmouseover="TD4.className='HOT'" onmouseout="TD4.className='COLD'">cell4</td>
</tr>
</table>

</BODY>
</HTML>

ya I know it is still kinda wordy to write for each element but it does allow you to change more than one style at a time..

also, if you are using php to generate the table then when you are running off the rows from your query or whatever you will need to create and append your counter's variable to the ID of the element. TD+1, TD+2 etc..

hope this helps!
Reply With Quote
  #5  
Old July 18th, 2000, 11:49 PM
JKB JKB is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Location: Roseburg, OR, USA
Posts: 23 JKB User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
whoops an even easier way to do this would be to bypass the IDs completely and use:

<td CLASS="COLD" onmouseover="this.className='HOT'" onmouseout="this.className='COLD'">text</td>

but you could still use IDs to affect different elements on the page etc..
Reply With Quote
  #6  
Old July 20th, 2000, 08:22 AM
Oliver Smith Oliver Smith is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 6 Oliver Smith User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Grr - Am I right in thinking that Netscape does not support 'onMouseOver' on anything except anchors?


Oliver
Reply With Quote
  #7  
Old July 20th, 2000, 09:55 AM
billyo billyo is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2000
Posts: 114 billyo User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 9
I am thinking you're right. One thing you can do to get around this is to stretch a small transparent gif over your table and then make an image map out of it. This will have the effect of making the area covered by the anchor tags large enough to cover the area of your table cells. Take a look at netscape's own homepage and you'll see that they use this workaround too.
Reply With Quote
  #8  
Old July 28th, 2000, 03:01 AM
BillyPeterson BillyPeterson is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2000
Posts: 14 BillyPeterson User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Well, I just found this script on the web, which seems to do what ya all are asking: http://www.dynamicdrive.com/dynamic...hlighttable.htm

Seems to be for IE only though...
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > HTML Programming > table row background colour

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway.