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

From	"Jonathan N. Little" <lws4art@gmail.com>
Newsgroups	alt.html
Subject	Re: Select a <td> element with a single onclick() function in <table> ?
Date	2024-01-23 08:20 -0500
Organization	LITTLE WORKS STUDIO
Message-ID	<uooefn$19mis$1@dont-email.me> (permalink)
References	<uolgpp$mkvp$1@dont-email.me>

Show all headers | View raw

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

Back to alt.html | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

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

csiph-web