Cell click reveals row number

[Camet]

I have a table with a dynamic number of rows and cells. From the
nature of the script I am writing, I cannot use IDs.

Each row has from 1 to 3 cells. Javascript tables have cells[] and
rows[].

cells [] is an array of all the cells of the table, supposedly 1D.
rows [] is an array of all the rows of the table. You can grab the
cells from the row click.

I wish to go the other way

Is there any way to find out what row was clicked on by the mouse when
the left most cell is clicked but the script ignores the rest of the
cells in the row.

 

[Matt Kruse]

Is there any way to find out what row was clicked on by the mouse
when the left most cell is clicked but the script ignores the rest of
the cells in the row.

You can just go up the parentNode chain from whatever was clicked until you
find a TR.
Then, look at the TR's rowIndex property.

 

[Camet]

You can just go up the parentNode chain from whatever was clicked until you

find a TR.
Then, look at the TR's rowIndex property.

I do not know what you mean by parentNode in relation to tables. I
have only used those in relation to reading xml files.

 

[Evertjan.]

Camet wrote on 06 jul 2006 in comp.lang.javascript:

I do not know what you mean by parentNode in relation to tables. I
have only used those in relation to reading xml files.

In DOM like in any other tree structure,
all elements exept the root["global"]
have a parent[node].

DOM elements are nearly people, who have two.

 

[Camet]

In DOM like in any other tree structure,

all elements exept the root["global"]
have a parent[node].

DOM elements are nearly people, who have two.

Okay, can you please give an example of this in commented code?

Thanks

Camet

 

[Lasse Reichstein Nielsen]

I do not know what you mean by parentNode in relation to tables. I
have only used those in relation to reading xml files.

The XML files are probably read into a W3C DOM structure. The same
thing happens with HTML in a browser, and there is a ECMAScript
binding for the DOM objects and methods that specifies how to use
it:
<URL:http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>

In this case, you can do something like:

function findRowNumber(element) { // element is a descendent of a tr element
while(element.tagName.toLowerCase() != "tr") {
element = element.parentNode; // breaks if no "tr" in path to root
}
return element.rowIndex;
}

and call it when clicking on the table:

<table
onclick="doSomethingWith(findRowNumber(event.target||event.srcElement));">
...
</table>

/L

 

[Evertjan.]

Lasse Reichstein Nielsen wrote on 06 jul 2006 in comp.lang.javascript:

The XML files are probably read into a W3C DOM structure. The same
thing happens with HTML in a browser, and there is a ECMAScript
binding for the DOM objects and methods that specifies how to use
it:
<URL:http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>

In this case, you can do something like:

function findRowNumber(element) { // element is a descendent of a tr
element
while(element.tagName.toLowerCase() != "tr") {
element = element.parentNode; // breaks if no "tr" in path to
root
}
return element.rowIndex;
}

and call it when clicking on the table:

<table
onclick="doSomethingWith(findRowNumber(event.target||event.srcElemen
t));"> ...
</table>

In IE HTML I simply do:

<table border=1>
<tr><td onclick='whichRowandCell(this)'>aaaaa
<td onclick='whichRowandCell(this)'>bbbbb
<tr><td onclick='whichRowandCell(this)'>cccc
<td onclick='whichRowandCell(this)'>ddd
</table>

<script type='text/javascript'>
function whichRowandCell(x){
alert('rowIndex: '+x.parentNode.rowIndex+
'\ncellIndex: '+x.cellIndex)
}
</script>

Should one expect a element between the tr and the td?
I think not.

 

[Lasse Reichstein Nielsen]

Should one expect a element between the tr and the td?
I think not.

Not in valid HTML, no. If you put the onclick on the table and use
event.target (with IE fallback to event.srcElement), then you might
need to traverse upwards to find the cell and row (but on the other
hand, you should also remember, as I didn't, the case where you click
on the table between rows.

/L