473,796 Members | 2,538 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

change background color on hover or select

I have a table with a form consisting of several checkboxes and I'm
wondering if its possible to change the table row background color on
mouseover or hover and make it stay that color when the checkbox in that row
is selected?
Poko
Sep 25 '05
13 12535
ASM wrote:
[...]

For the moment I'm fighting with appendChild in a table a cloneNoded row.
That's work fine with FF, Opera and others except ... IE (of course)
I have yet to do a simplier test before coming to ask here what is wrong.


Remember that when encountering a table, browsers will insert a tbody
element into the DOM even if there isn't one in the source HTML (they
are mandatory elements but the tags are optional).

A common problem is attempting to append a new row to a table element
when you should append to a tbody element. Other browsers will tolerate
it and add the row to the tbody anyway, but not IE.

e.g. if 'el' is a reference to a table:

var aRow = el.rows[0].cloneNode(true );
el.appendChild( aRow);

will not work in IE. But:

var aRow = el.rows[0].cloneNode(true );
var lastRow = el.rows[el.rows.length - 1];
lastRow.parentN ode.insertBefor e(aRow, lastRow.nextSib ling);

will work (and in others too) because the parent of the lastRow is a
tbody, not a table.

There is a sample below. Of course I could have just used a tbody
element instead of the table when climbing the tree, this is just a demo.

<script type="text/javascript">

function cloneRow( el )
{
// Get the table - should use tbody but this is just for show
while (el.parentNode && 'table' != el.nodeName.toL owerCase()){
el = el.parentNode;
}
var aRow = el.rows[0].cloneNode(true );

// The next line won't work in IE
// el.appendChild( aRow);

// But these will
var lastRow = el.rows[el.rows.length - 1];
lastRow.parentN ode.insertBefor e(aRow, lastRow.nextSib ling);

}

</script>

<table border="1">
<tr>
<td onclick="cloneR ow(this)">Click me</td>
</tr>
</table>

[...]

--
Rob
Sep 25 '05 #11
ASM
RobG a écrit :
ASM wrote:
[...]

For the moment I'm fighting with appendChild in a table a cloneNoded row.
That's work fine with FF, Opera and others except ... IE (of course)
I have yet to do a simplier test before coming to ask here what is wrong.

Remember that when encountering a table, browsers will insert a tbody
element into the DOM even if there isn't one in the source HTML (they
are mandatory elements but the tags are optional).

A common problem is attempting to append a new row to a table element
when you should append to a tbody element. Other browsers will tolerate
it and add the row to the tbody anyway, but not IE.


No, no, I appendChild in a tbody
But, perhaps my row is too heavy for this poor IE (my IE5.2 Mac ...)
with css and IE's roll-over +
image (with onclick) +
input with onchange
etc

way I do :
I have an undisplayed table with one row
I have an other table of x rows (thead, tbody, tfoot)
each row of each tbody of both tables are same (except a td text)

var rw = document.getEle mentById('refRo w').cloneNode(t rue);
give a new id to the clone
var tb = document.getEle mentById('tBody Target');
tb.appendchild( rw);
original row being not undisplayed
I have not to display in IE understanding : tableRow

IE is lost with width of cols (1st col width becomes initial table width)
IE forget all events (an alert showes it)

I did try with M$ function : insertRow()
without succes because that would only create a new empty row
(and I'm not sure that works with IE Mac)
e.g. if 'el' is a reference to a table:

var aRow = el.rows[0].cloneNode(true );
el.appendChild( aRow);

will not work in IE. But:

var aRow = el.rows[0].cloneNode(true );
var lastRow = el.rows[el.rows.length - 1];
lastRow.parentN ode.insertBefor e(aRow, lastRow.nextSib ling);
Perhaps could I try that
(but I have a tfoot ... ?)
will work (and in others too) because the parent of the lastRow is a
tbody, not a table.

There is a sample below. Of course I could have just used a tbody
element instead of the table when climbing the tree, this is just a demo.
keep it here for my archives (and later try)
<script type="text/javascript">

function cloneRow( el )
{
// Get the table - should use tbody but this is just for show
while (el.parentNode && 'table' != el.nodeName.toL owerCase()){
el = el.parentNode;
}
var aRow = el.rows[0].cloneNode(true );

// The next line won't work in IE
// el.appendChild( aRow);

// But these will
var lastRow = el.rows[el.rows.length - 1];
lastRow.parentN ode.insertBefor e(aRow, lastRow.nextSib ling);

}

</script>

<table border="1">
<tr>
<td onclick="cloneR ow(this)">Click me</td>
</tr>
</table>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 26 '05 #12
ASM wrote:
RobG a écrit :
ASM wrote:
[...]

For the moment I'm fighting with appendChild in a table a cloneNoded
row.
That's work fine with FF, Opera and others except ... IE (of course)
I have yet to do a simplier test before coming to ask here what is
wrong.


Remember that when encountering a table, browsers will insert a tbody
element into the DOM even if there isn't one in the source HTML (they
are mandatory elements but the tags are optional).

A common problem is attempting to append a new row to a table element
when you should append to a tbody element. Other browsers will
tolerate it and add the row to the tbody anyway, but not IE.

No, no, I appendChild in a tbody
But, perhaps my row is too heavy for this poor IE (my IE5.2 Mac ...)


Hmm, it was a long shot. I'll have a play with IE Mac later (actually
much later... say +7hrs from now).

[...]
--
Rob
Sep 26 '05 #13
ASM
RobG a écrit :
ASM wrote:
RobG a écrit :
ASM wrote:
[...]
For the moment I'm fighting with appendChild in a table a cloneNoded
row.
That's work fine with FF, Opera and others except ... IE (of course)

A common problem is attempting to append a new row to a table element
when you should append to a tbody element. Other browsers will
tolerate it and add the row to the tbody anyway, but not IE.


No, no, I appendChild in a tbody
But, perhaps my row is too heavy for this poor IE (my IE5.2 Mac ...)


Hmm, it was a long shot. I'll have a play with IE Mac later (actually
much later... say +7hrs from now).


if ...
http//perso.wanadoo.f r/stephane.moriau x/truc/clone_row.htm
--
Stephane Moriaux et son [moins] vieux Mac
Sep 26 '05 #14

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

Similar topics

1
14778
by: David T-G | last post by:
Hi! Please be gentle; I'm new to ciwas and CSS in general, and know little to no javascript (but that might win me points here ;-) I have nine 'tab' images, with corresponding high-background versions for display under hover, which I would like to control via CSS. When on a page, the tab should be just an image rather than a link with hover sensing, so that is probably easy to just use <img> rather than <div> there.
2
21343
by: carramba | last post by:
Hi! is it possible to change "selector" color in drop-down list? <select name="select" style="background-color: #ff0000"> <option style="background-color: #ff0000" value="1">Cony</option> <option style="background-color: #ffffff" value="2">Alex</option> <option style="background-color: #0000ff" value="3">Peter</option> </select>
1
16089
by: nick | last post by:
I have the following code: <style> #item1 { DISPLAY: block; BACKGROUND: url(ProjMenuImgs/ProjBtn.gif) no-repeat 0px 0px; WIDTH: 87px; HEIGHT: 94px; } #item1:hover { background-position: 0 -92px; }
10
6013
by: Richard | last post by:
The style sheet shown below is from the suckerfish vertical menu. http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html I've added in a few minor changes to color code the levels. I changed the width of the first level to 8em and get an unwanted space between that and the 2nd level. I'd like their to be no gap between the levels when I change the widths. What's to change to do this? Also, I do not understand the...
11
19620
by: Yeah | last post by:
I have a multiple choice quiz where I would like to use CSS to change the color of the answers upon clicking them. I would like to present the right and wrong answers up front, rather than direct the user to a separate page with all correct answers. Do the answers have to be "links" for this to work? They have to be inactive links, because they don't actually go anywhere. They only serve the purpose of changing color whether they're...
3
3391
by: Mike Barnard | last post by:
Hi all, newbie here. Odd sounding subject but I can't describe it any better. I'm trying to teach myself a little about CSS. In a test site (not published) I am trying to use CSS to make navigation buttons. I'm using the tutorial I found at this site as a basis for it. http://www.mako4css.com/TFonts.htm
2
4541
by: chris_culley | last post by:
Hi there, I've got a gif with (highly) irregular shapes (lots of jigsaw pieces) that I want to map so that each piece is a link... The pieces are currently just a frame drawing, but as they are hovered over I want them to be coloured in. I thought the easiest way to do this would be to change the background image of the entire map (since it's a bit of a pain trying to select each piece out of the image and
1
1756
by: roN | last post by:
Hi, I have a table in which I would like to change the background image onMouseOver. I implemented it with CSS but IE doesn't support hovers on tables, so I'd need to go via JS for IE. Can anyone give me a hint how to do this? So far it looks like: <tr> <td class="frontbar"> <a href="#"><img src="images/dot.gif" width="10"
5
4658
by: studentofknowledge | last post by:
hi guys im new to javascript and need some guidence please.. im trying to display a 400x400 pixel coloured area in the middle of a webpage that stays in the middle with a browser window resize. Within the area, i would like to display an image and some text, overriding a few words with an inline style. i would like the image to change once the mouse is placed over it. and when the mouse is removed from the image the image should...
0
9684
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
9530
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10017
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9055
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...
1
7552
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6793
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
5445
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
5577
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2928
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.