By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,397 Members | 1,463 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,397 IT Pros & Developers. It's quick & easy.

capture row of table clicked - javascript

P: n/a
I have table with 'n' number of rows.
I want to highlight the row when ever i click on a particular row of
the table. Can anyone please help me in this. Iam not using any Id's
for the row.

Thanks in advance
Universal

Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
BMR
Try CSS styles.

CSS :

<style type="text/css">

table.my-table tr:hover {
background-color: black;
color: white;
}
</style>

<table class="my-table"..>
....
</table>

I don't know if it works with IE.

ch***************@gmail.com a écrit :
I have table with 'n' number of rows.
I want to highlight the row when ever i click on a particular row of
the table. Can anyone please help me in this. Iam not using any Id's
for the row.

Thanks in advance
Universal

Jul 23 '05 #2

P: n/a
But it is not working in IE

Jul 23 '05 #3

P: n/a


ch***************@gmail.com wrote:
I have table with 'n' number of rows.
I want to highlight the row when ever i click on a particular row of
the table. Can anyone please help me in this. Iam not using any Id's
for the row.


Well one way (assuming you only want to have one row highlighted at a
time) is to use
var lastRowClicked = null;
var clickColor = 'lightblue';

function clicked (row) {
if (lastRowClicked && lastRowClicked.style) {
lastRowClicked.style.backgroundColor = '';
}
lastRowClicked = row;
if (lastRowClicked.style) {
lastRowClicked.style.backgroundColor = clickColor;
}
}
then for each row add an onclick handler:
<tr onclick="clicked(this);">

Or put the event handler on the table and then when the event bubbles up
you need to check the srcElement/target, walk up the parentNode
hierarchy to find the containing <tr> element and then change its style,
see here
<http://home.arcor.de/martin.honnen/javascript/200501/test2005012001.html>
for an example, it allows you to choose whether the highlight color
should stick until another row is clicked or whether each clicked row
should have the color. The code meant to be usable for other types as a
list as well.
Tested to work with the examples in that page in Netscape 7, IE 6, Opera
7, should work with IE 5, Netscape 6, other Mozilla based browsers too,
hopefully Konqueror and Safari too but I haven't tested with those.


--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #4

P: n/a
Martin Honnen wrote:
[...]
Tested to work with the examples in that page in Netscape 7, IE 6, Opera
7, should work with IE 5, Netscape 6, other Mozilla based browsers too,
hopefully Konqueror and Safari too but I haven't tested with those.


I tried your page - an issue with Safari when using:

target = evt.target;

is that evt.target will return the element actually clicked on,
including children of the element with the onclick. So if you have an
onclick handler on a td with some text in it and the user clicks on the
text, evt.target will be a reference to the text node, not the td.

In the case of your example above, the onclick is on the TR, but if I
click on the text in a cell, evt.target returns a reference to the text
node, not the cell, so when you call for the parentNode, you get the
cell not the row. Similarly for other elements such as LI & IMG.

I do not have any elegant way of dealing with this, I suppose you could
just climb up the parent tree to see the first parent element that has
an onclick that matches the event, but that may not be reliable. If
there is an onclick on a td and its parent tr, I don't know if you can
tell which one was clicked on.

Of course if the onclick passes "this" then you get an explicit
reference to the element whose onclick fired - and life is sweet.

--
Rob
Jul 23 '05 #5

P: n/a


RobG wrote:
Martin Honnen wrote:
[...]
Tested to work with the examples in that page in Netscape 7, IE 6,
Opera 7, should work with IE 5, Netscape 6, other Mozilla based
browsers too, hopefully Konqueror and Safari too but I haven't tested
with those.

I tried your page - an issue with Safari when using:

target = evt.target;

is that evt.target will return the element actually clicked on,
including children of the element with the onclick. So if you have an
onclick handler on a td with some text in it and the user clicks on the
text, evt.target will be a reference to the text node, not the td.


I am not able to check with Safari now but of course in the W3C DOM if
an event bubbles up the target is not changed, so the onclick handler of
the <tr> element will see a text node or an <img> element or an <input>
element as the target, whether it is Safari or Mozilla.
And the code takes care of that:

while (target && target.tagName.toLowerCase() != this.tagName &&
target != this.parentElement)
{
target = target.parentNode;
}

There is one error however in the code as uploaded first, the check
if (target.parentNode == 3) {
target = target.parentNode;
}
should be
if (target.nodeType == 3) {
target = target.parentNode;
}
of course, I am going to upload a new version now.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #6

P: n/a
I have some working script

<script language="javascript">

document.onclick = function()
{
var elem = event.srcElement.parentElement;
alert(elem.id);

}
function onLoadFunction()
{
var len = document.getElementById('mytable');

for(i=0; i<len.rows.length; i++)
{
var rowId = len.rows(i).setAttribute("id", i+"th Row");

}

}
</script>
<body onload="onLoadFunction()">
<table id="mytable" >
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</body>

This is working fine with IE but its not worling in Netscape

Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.