capture row of table clicked - javascript

[chandramohan.mani]

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

 

[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.

(e-mail address removed) a écrit :

 

[Martin Honnen]

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.

 

[RobG]

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.

 

[Martin Honnen]

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.

 

[chandramohan.mani]

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