Dear All,
I have this,
<table>
<colgroup>
<col id="column1" />
<col id="column2" />
<col id="column3" />
</colgroup>
<tr onmouseover="do hi-light" onmouseout="undo hi-light">
<td></td>
<td></td>
<td></td>
</tr>
</table>
I can do the hi-light on the first two columns except the last when mouse
moveover the row, but now I want to not hi-lighting the row when the last
column is being over, coz I have three separate links on the last column
cell. Is it possible knowing which column is being selected when a row is
selected? I do not want to set any attribute inside <td>
Can I check it inside the onmouseover/out function?
Regards,
Wandy 13  3023 
Wandy Tang wrote: Dear All,
I have this,
<table>
<colgroup>
<col id="column1" />
<col id="column2" />
<col id="column3" />
</colgroup>
<tr onmouseover="do hi-light" onmouseout="undo hi-light">
<td></td>
<td></td>
<td></td>
</tr>
</table>
I can do the hi-light on the first two columns except the last when mouse
moveover the row, but now I want to not hi-lighting the row when the last
column is being over, coz I have three separate links on the last column
cell. Is it possible knowing which column is being selected when a row is
selected? I do not want to set any attribute inside <td>
Why? Trying to determine from the tr which td is mousedover is
tremedously more difficult than modifying the td tags.
Can I check it inside the onmouseover/out function?
The fact that the onmouseover and onmouseout fire at all is odd.
Function names can not contain spaces, and it should include the () part
of the function call. Let me guess, you are testing in IE?
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Wandy Tang wrote: I have this,
<table>
<colgroup>
<col id="column1" />
<col id="column2" />
<col id="column3" />
</colgroup>
<tr onmouseover="do hi-light" onmouseout="undo hi-light">
<td></td>
<td></td>
<td></td>
</tr>
</table>
I can do the hi-light on the first two columns except the last when mouse
moveover the row, but now I want to not hi-lighting the row when the last
column is being over, coz I have three separate links on the last column
cell. Is it possible knowing which column is being selected when a row is
selected? I do not want to set any attribute inside <td>
Can I check it inside the onmouseover/out function?
I am not sure I have understood what you want but here is an example
checking the cellIndex property of a <td> element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>cellIndex</title>
<script type="text/javascript">
function highlight (row, evt, backgroundColor) {
var sourceElement;
if (evt.srcElement) {
sourceElement = evt.srcElement;
}
else if (evt.target) {
sourceElement = evt.target;
if (sourceElement.nodeType != 1) {
sourceElement = sourceElement.parentNode;
}
}
if (sourceElement == row && row.style) {
row.style.backgroundColor = backgroundColor;
}
else {
var targetCell = sourceElement;
while (targetCell && targetCell.tagName.toLowerCase() != 'td') {
targetCell = targetCell.parentNode;
}
if (targetCell && targetCell.cellIndex != 2) {
row.style.backgroundColor = backgroundColor;
}
}
}
</script>
</head>
<body>
<table border="1">
<tbody>
<tr onmouseover="highlight(this, event, 'lightblue');"
onmouseout="highlight(this, event, '')">
<td>
0, 0
</td>
<td>
0, 1
</td>
<td>
0, 2
<a href="http://JavaScript.FAQTS.com/">JavaScript.FAQTs.com</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
That way the whole row (<tr>) changes the backgroundColor but only if
you move the mouse over the first or second cell.
--
Martin Honnen http://JavaScript.FAQTs.com/
Martin Honnen wrote on 05 sep 2004 in comp.lang.javascript : Wandy Tang wrote: I can do the hi-light on the first two columns except the last when
mouse moveover the row, but now I want to not hi-lighting the row
when the last column is being over, coz I have three separate links
on the last column cell. Is it possible knowing which column is being
selected when a row is selected? I do not want to set any attribute
inside <td> Can I check it inside the onmouseover/out function?
I am not sure I have understood what you want but here is an example
checking the cellIndex property of a <td> element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>cellIndex</title>
<script type="text/javascript">
function highlight (row, evt, backgroundColor) {
var sourceElement;
if (evt.srcElement) {
sourceElement = evt.srcElement;
}
else if (evt.target) {
sourceElement = evt.target;
if (sourceElement.nodeType != 1) {
sourceElement = sourceElement.parentNode;
}
}
if (sourceElement == row && row.style) {
row.style.backgroundColor = backgroundColor;
}
else {
var targetCell = sourceElement;
while (targetCell && targetCell.tagName.toLowerCase() != 'td') {
targetCell = targetCell.parentNode;
}
if (targetCell && targetCell.cellIndex != 2) {
row.style.backgroundColor = backgroundColor;
}
}
}
</script>
</head>
<body>
<table border="1">
<tbody>
<tr onmouseover="highlight(this, event, 'lightblue');"
onmouseout="highlight(this, event, '')">
<td>
0, 0
</td>
<td>
0, 1
</td>
<td>
0, 2
<a href="http://JavaScript.FAQTS.com/">JavaScript.FAQTs.com</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Nice
That way the whole row (<tr>) changes the backgroundColor but only if
you move the mouse over the first or second cell.
change both occurances of
row.style.backgroundColor = backgroundColor;
to
row.firstChild.style.backgroundColor = backgroundColor;
row.firstChild.nextSibling.style.backgroundColor = backgroundColor;
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)
On Sun, 05 Sep 2004 02:00:32 -0400, Randy Webb <Hi************@aol.com>
wrote: Wandy Tang wrote:
[snip]
<tr onmouseover="do hi-light" onmouseout="undo hi-light">
[snip]
The fact that the onmouseover and onmouseout fire at all is odd.
Function names can not contain spaces, and it should include the () part
of the function call. Let me guess, you are testing in IE?
I think you'll find it's just a simplification. :)
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Evertjan. wrote: Martin Honnen wrote on 05 sep 2004 in comp.lang.javascript:
<script type="text/javascript">
function highlight (row, evt, backgroundColor) {
var sourceElement;
if (evt.srcElement) {
sourceElement = evt.srcElement;
}
else if (evt.target) {
sourceElement = evt.target;
if (sourceElement.nodeType != 1) {
sourceElement = sourceElement.parentNode;
}
}
if (sourceElement == row && row.style) {
row.style.backgroundColor = backgroundColor;
}
else {
var targetCell = sourceElement;
while (targetCell && targetCell.tagName.toLowerCase() != 'td') {
targetCell = targetCell.parentNode;
}
if (targetCell && targetCell.cellIndex != 2) {
row.style.backgroundColor = backgroundColor;
}
}
}
</script>
<table border="1">
<tbody>
<tr onmouseover="highlight(this, event, 'lightblue');"
onmouseout="highlight(this, event, '')">
<td>
0, 0
</td>
<td>
0, 1
</td>
<td>
0, 2
<a href="http://JavaScript.FAQTS.com/">JavaScript.FAQTs.com</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
change both occurances of
row.style.backgroundColor = backgroundColor;
to
row.firstChild.style.backgroundColor = backgroundColor;
row.firstChild.nextSibling.style.backgroundColor = backgroundColor;
Have you tried that with Mozilla or Netscape? The firstChild is a text
node so trying to change its style results in an error.
--
Martin Honnen http://JavaScript.FAQTs.com/
Martin Honnen wrote on 05 sep 2004 in comp.lang.javascript : change both occurances of
row.style.backgroundColor = backgroundColor;
to
row.firstChild.style.backgroundColor = backgroundColor;
row.firstChild.nextSibling.style.backgroundColor = backgroundColor;
Have you tried that with Mozilla or Netscape? The firstChild is a text
node so trying to change its style results in an error.
No, why so negative, do you have a better solution?
Please explain the meaning of "textnode" here.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)
On 05 Sep 2004 15:56:18 GMT, Evertjan. <ex**************@interxnl.net>
wrote:
[snip] Please explain the meaning of "textnode" here.
In the document tree, virtually *everything* is represented by some form
of node. It isn't just elements - comments, text, the DTD - they are all
nodes.
A text node is a node in the tree that represents the text you'll find as
the content of an element, such as a paragraph.
If you want some more information, read the DOM Core Specification. It
covers the structure of the document tree.
<URL:http://www.w3.org/TR/DOM-Level-2-Core>
Hope that helps,
Mike
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Evertjan. wrote: Martin Honnen wrote on 05 sep 2004 in comp.lang.javascript:
change both occurances of
row.style.backgroundColor = backgroundColor;
to
row.firstChild.style.backgroundColor = backgroundColor;
row.firstChild.nextSibling.style.backgroundColor = backgroundColor;
Have you tried that with Mozilla or Netscape? The firstChild is a text
node so trying to change its style results in an error.
No, do you have a better solution?
I posted a working solution as far as I thought I was able to understand
the original question, you followed that up with some changes that would
cause a script error in Netscape/Mozilla.
Please explain the meaning of "textnode" here.
A text node as defined in the W3C DOM Core, it is a node with nodeType
being 3.
--
Martin Honnen http://JavaScript.FAQTs.com/
Martin Honnen wrote on 05 sep 2004 in comp.lang.javascript : No, do you have a better solution?
I posted a working solution as far as I thought I was able to understand
the original question, you followed that up with some changes that would
cause a script error in Netscape/Mozilla.
As far as I understood, the OP wanted only the two first TD's highlighted,
as per my IE code, so if yiou know a cross broweser solution, ...
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)
Evertjan. wrote: As far as I understood, the OP wanted only the two first TD's highlighted,
as per my IE code, so if yiou know a cross broweser solution, ...
The row element object has a cells property you could loop through and
change the style of the cells you want to change.
--
Martin Honnen http://JavaScript.FAQTs.com/
Martin Honnen wrote on 06 sep 2004 in comp.lang.javascript : Evertjan. wrote:
As far as I understood, the OP wanted only the two first TD's
highlighted, as per my IE code, so if yiou know a cross broweser
solution, ...
The row element object has a cells property you could loop through and
change the style of the cells you want to change.
Could you enlighten us/the OP with some code, please.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)
Evertjan. wrote: Martin Honnen wrote on 06 sep 2004 in comp.lang.javascript: The row element object has a cells property you could loop through and
change the style of the cells you want to change.
Could you enlighten us/the OP with some code, please.
Like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>cellIndex</title>
<script type="text/javascript">
function highlightCells (row, cellIndexToExclude, backgroundColor) {
for (var c = 0; c < row.cells.length; c++) {
if (c != cellIndexToExclude) {
row.cells[c].style.backgroundColor = backgroundColor;
}
}
}
function highlight (row, cellIndexToExclude, evt, backgroundColor) {
var sourceElement;
if (evt.srcElement) {
sourceElement = evt.srcElement;
}
else if (evt.target) {
sourceElement = evt.target;
if (sourceElement.nodeType != 1) {
sourceElement = sourceElement.parentNode;
}
}
if (sourceElement == row && row.style) {
highlightCells(row, cellIndexToExclude, backgroundColor);
}
else {
var targetCell = sourceElement;
while (targetCell && targetCell.tagName.toLowerCase() != 'td') {
targetCell = targetCell.parentNode;
}
if (targetCell && targetCell.cellIndex != cellIndexToExclude) {
highlightCells(row, cellIndexToExclude, backgroundColor)
}
}
}
</script>
</head>
<body>
<table border="1">
<tbody>
<tr onmouseover="highlight(this, 2, event, 'lightblue');"
onmouseout="highlight(this, 2, event, '')">
<td>
0, 0
</td>
<td>
0, 1
</td>
<td>
0, 2
<a href="http://JavaScript.FAQTS.com/">JavaScript.FAQTs.com</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
--
Martin Honnen http://JavaScript.FAQTs.com/
Martin Honnen wrote on 06 sep 2004 in comp.lang.javascript : Like this:
Thank you,
Wow, this not something I can remember next time I need it.
Then, I will look up this posting in Google groups.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: nimdez |
last post by:
Hi,
I am working on an existing code base in which a lot of data displayed
to the user is formatted in tables. Most tables are printed row-by-row
using printf() with "%s" print conversion...
|
by: perspolis |
last post by:
I have 3 columns in my datatabel name Total,unit,Price.
I use a column expression in my project..and in this
expression i multiplied two column...
for example ...
|
by: Robert Schuldenfrei |
last post by:
Dear NG,
After being away from C# programming for a spell, I am trying my hand at
what should be a simple task. I have been hitting my head against the wall
this morning. I have a simple order...
|
by: Owen T. Soroke |
last post by:
Using VB.NET
I have a ListView with several columns.
Two columns contain integer values, while the remaining contain string
values.
I am confused as to how I would provide functionality to...
|
by: Aaron Smith |
last post by:
Ok. I have a dataset that has multiple tables in it. In one of the child
tables, I have a column that I added to the DataSet (Not in the
DataSource). This column does not need to be stored in the...
|
by: ricky |
last post by:
Hello,
If anyone could help me with this I would highly appreciate it. I've
tried everything and nothing works. What I am trying to do is so damn
basic and it's just frustrating that it seems...
|
by: TPhelps |
last post by:
I have a sample of an unbound (autogeneratecolumns is true) sortable/pagable
datagrid that works.
I want to change one of the columns to a hyperlink. The examples I find use
a bound column. I...
|
by: Steph. |
last post by:
I have a List view displaying data in Detail mode with several columns.
How I can get the column index the user clicked on ? (when user click on an item inside the ListView, not on a column...
|
by: Peter Gibbs |
last post by:
I need some help with this problem.
I'm using Access 2002 with XP.
My problem is with a 2-column listbox.
My VBA code puts text data into the listbox.
The problem is that the text data...
|
by: Frank |
last post by:
I could use your help. I need to add tooltips to each column of an
HTML table, for the entire column of cells. I want to add a single
element to the table, and have that one element represent the...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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,...
|
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...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
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...
| |
