Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > alt.html > #23952 > unrolled thread

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

Back to article view | Back to alt.html

Contents

  Select a <td> element with a single onclick() function in <table> ? Janis Papanagnou <janis_papanagnou+ng@hotmail.com> - 2024-01-22 11:42 +0100
    Re: Select a <td> element with a single onclick() function in <table> ? JJ <jj4public@outlook.com> - 2024-01-22 22:27 +0700
      Re: Select a <td> element with a single onclick() function in <table> ? Janis Papanagnou <janis_papanagnou+ng@hotmail.com> - 2024-01-22 17:21 +0100
        Re: Select a <td> element with a single onclick() function in <table> ? Janis Papanagnou <janis_papanagnou+ng@hotmail.com> - 2024-01-22 19:03 +0100
          Re: Select a <td> element with a single onclick() function in <table> ? JJ <jj4public@outlook.com> - 2024-01-23 09:33 +0700
    Re: Select a <td> element with a single onclick() function in <table> ? "Jonathan N. Little" <lws4art@gmail.com> - 2024-01-23 08:20 -0500

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

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

[toc] | [next] | [standalone]

#23954

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) {
  //...
}

[toc] | [prev] | [next] | [standalone]

#23956

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

[toc] | [prev] | [next] | [standalone]

#23957

On 22.01.2024 17:21, Janis Papanagnou wrote:
> 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!

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

[toc] | [prev] | [next] | [standalone]

#23958

On Mon, 22 Jan 2024 19:03:54 +0100, Janis Papanagnou wrote:
> On 22.01.2024 17:21, Janis Papanagnou wrote:
>> 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!
> 
> 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

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.

[toc] | [prev] | [next] | [standalone]

#23959

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)?


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

[toc] | [prev] | [standalone]

Back to top | Article view | alt.html

csiph-web