Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Select a <td> element with a single onclick() function in <table> ?

17 views
Skip to first unread message

Janis Papanagnou

unread,
Jan 22, 2024, 5:42:04 AM1/22/24
to
With a single onclick() definition on the <table> level

<table onclick="f()">
<tr>
<td id="11">
...
<td id="42">
...

is it possible to get in f() the concrete element that has been
clicked on, e.g. the one with id="42" (or do I have to provide
an own onclick() attribute with every single <td> element)?

Thanks.

Janis

JJ

unread,
Jan 22, 2024, 10:27:15 AM1/22/24
to
On Mon, 22 Jan 2024 11:42:00 +0100, Janis Papanagnou wrote:
> With a single onclick() definition on the <table> level
>
> <table onclick="f()">
> <tr>
> <td id="11">
> ....
> <td id="42">
> ....
>
> is it possible to get in f() the concrete element that has been
> clicked on, e.g. the one with id="42" (or do I have to provide
> an own onclick() attribute with every single <td> element)?
>
> Thanks.
>
> Janis

Within that `f()` function, `event` refers to the current (click) event
object. Its `target` property refers to the clicked element.

Alternatively, pass the `this` keyword as an argument of the `f()` function
call. e.g.

onclick="f(this)"

The `f()` function should be declared as e.g.:

function f(clickedEle) {
//...
}

Janis Papanagnou

unread,
Jan 22, 2024, 11:21:03 AM1/22/24
to
On 22.01.2024 16:27, JJ wrote:
> On Mon, 22 Jan 2024 11:42:00 +0100, Janis Papanagnou wrote:
>> With a single onclick() definition on the <table> level
>>
>> <table onclick="f()">
>> <tr>
>> <td id="11">
>> ....
>> <td id="42">
>> ....
>>
>> is it possible to get in f() the concrete element that has been
>> clicked on, e.g. the one with id="42" (or do I have to provide
>> an own onclick() attribute with every single <td> element)?
>
> Within that `f()` function, `event` refers to the current (click) event
> object. Its `target` property refers to the clicked element.
>
> Alternatively, pass the `this` keyword as an argument of the `f()` function
> call. e.g.
>
> onclick="f(this)"
>
> The `f()` function should be declared as e.g.:
>
> function f(clickedEle) {
> //...
> }
>

This is fine. I'll try that in my code. - Thanks!

Janis

Janis Papanagnou

unread,
Jan 22, 2024, 1:03:58 PM1/22/24
to
I couldn't get it working with my HTML event-handler definition
<table ... onclick="f()">
Inside f() the 'event' was undefined, and all I tried with 'this',
'target', 'document', function parameters, access through elements,
and whatnot, did not work. :-(
(And all I found on that topic on the net uses JS event handlers,
addEventListener, not the HTML onclick().)


Installing a JS event handler like this (for example) works:

function f(ev) { alert(ev.target.closest('img').title); }
document.addEventListener('click', f);

I wanted to stay with the onclick="f()" logic, but okay... :-/

Janis

JJ

unread,
Jan 22, 2024, 9:33:09 PM1/22/24
to
If you want `this` in the function to refer to the element, do it like
below.

onclick="f.call(this)"

Odd that the `event` is not available within that function. Unless... a code
was executed asyncronously. i.e. executed later after the event has been
handled.

Jonathan N. Little

unread,
Jan 23, 2024, 8:20:58 AM1/23/24
to
I wouldn't use one function on the parent, but rather attached one
function to each element and self-reference in the function to ID the
element clicked:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Attach to Each</title>

<style>
td {
padding: .2em;
border: 1px solid black;
width: 2em;
}
</style>
</head>

<body>
<table>
<tr>
<td id="Sam">Sam</td>
<td id="Jim">Jim</td>
<td id="Bob">Bob</td>
<td id="Pat">Pat</td>
</tr>
</table>

<script>
function whoAmI(e) {
alert('I am ' + e.target.id);
}

const tds = Array.from(document.querySelectorAll('td'));
tds.forEach((element) => {
element.addEventListener('click', whoAmI);
});
</script>
</body>
</html>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
0 new messages