How do I identify which cell was clicked on a table using javascript?

Question

I've tried to use several other suggested solutions, but either they don't apply or don't work in this case.

The table on this page was auto-generated with JavaScript from row data. Due to the high complexity of the code (which is irrelevant), I simplified the input data and I just added the simplified generated table on the HTML here.

I need to identify the cell that is clicked in order to make an edit function that will modify the structure of the table.

EDIT: I need the name of the cell that was clicked that is included in the table, including the header. Also I need the click inside the cell arrea, NOT only in the input area as the answers bellow. Stackoveflow didn't let me edit the question and add the details, until recently.

Also, Heretic Monkey's "duplicate" is using jquery, php and ajax so there is no duplicate found so far. BTW, here is the jsfiddle: jsfiddle.net/7mxde8a5

<!DOCTYPE html>
<html lang="en">

<head>
  <title>test</title>
  <meta charset="utf-8">
  <style>
    body {
      text-align: left;
      background-color: #dddddd;
      margin: 0px;
      overflow: hidden
    }

    #container {
      margin: 10px;
      text-align: left;
    }

    table {
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px;
    }

    .table tr :hover {
      background-color: #ffff99;
    }
  </style>
</head>

<body>
  <div id="container">
  </div>
  <table class='table' ;>
    <th style="background-color:#8C92DE; border: 1px solid #000"><label><input type="checkbox" value="h1" name="100"></label> h1</th>
    </tr>
    <td style="background-color:#d7d9f2; border: 1px solid #000">aaa <input type="text" name=101></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#80B9D8; border: 1px solid #000"><label><input type="checkbox" value="h2" name="200"></label> h2</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">aaa <input type="text" name=201></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">bbb <input type="text" name=202></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">ccc <input type="text" name=203></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#80B9D8; border: 1px solid #000"><label><input type="checkbox" value="h3" name="210"></label> h3</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">aaa <input type="text" name=211></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#5ae25a; border: 1px solid #000"><label><input type="checkbox" value="h4" name="300"></label> h4</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000">aaa <input type="text" name=301></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000">bbb <input type="text" name=302></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000">ccc <input type="text" name=303></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000"><label><input type="checkbox" value="ddd" name="304"></label> ddd</td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#d2f7d2; border: 1px solid #000"><label><input type="checkbox" value="eee" name="305"></label> eee</td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#edfced; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#ff7d7d; border: 1px solid #000"><label><input type="checkbox" value="h5" name="400"></label> h5</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#edfced; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#ffcaca; border: 1px solid #000"><label><input type="checkbox" value="aaa" name="401"></label> aaa</td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#eafcff; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#edfced; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#ffcaca; border: 1px solid #000"><label><input type="checkbox" value="bbb" name="402"></label> bbb</td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <th style="background-color:#80B9D8; border: 1px solid #000"><label><input type="checkbox" value="h6" name="220"></label> h6</th>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">aaa <input type="text" name=221></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">bbb <input type="text" name=222></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">ccc <input type="text" name=223></td>
    </tr>
    <tr>
      <td style="background-color:#eef0fb; border-left: 1px solid #000; border-right: 1px solid #000"></td>
      <td style="background-color:#caf2ff; border: 1px solid #000">ddd <input type="text" name=224></td>
    </tr>
  </table>
  <script src="main.js"></script>
</body>

</html>

Note that if you don't mention what you've tried in your question, it will likely be marked as a duplicate. Perhaps of a question you've already tried. For instance, searching on your title found [Finding the location of a TD in a table](https://stackoverflow.com/q/16130062/215552) pretty rapidly. — Heretic Monkey, Sep 17 '19 at 15:56
@Heretic Monkey That "solution" doesn't explain how to isolate a click event from a single cell on a table and also rows and columns are not what I'm asking as the table is not homogeneous, it is more like a tree. So I need the name of the actual cell that was clicked -and not all cells have names. — dllb, Sep 17 '19 at 16:20
Nowhere in your question do you state you need the name of the cell. That's precisely the reason I asked you to explain what you'd tried previously and why it did not work in my first comment. — Heretic Monkey, Sep 17 '19 at 16:25
Now I would say [Detect user click on an HTML table TD, and get value](https://stackoverflow.com/q/35963540/215552) is the duplicate. — Heretic Monkey, Sep 17 '19 at 16:26
What exactly was not good with my comment that you deleted it? — dllb, Sep 17 '19 at 18:21

score 2 · Answer 1 · answered Sep 17 '19 at 15:55

The click event has a target property that tells you the element that was clicked. So something like this:

document.querySelectorAll('td').forEach(cell => {
  cell.addEventListener('click', evt => {
    console.log('The element that was clicked was ', evt.target);
  }); 
});

Note that if you use arrow functions to define the callback on each cell in the way I just did, you can actually just reference cell directly in the event handler instead of using evt.target.

score 1 · Accepted Answer · edited Sep 17 '19 at 15:59

1

In the code generating the table you can put unique data attributes on every td: something like data-row and data-column will do.

Then, the event listener can use event.target.getAttribute("data-row") and event.target.getAttribute("data-column") to identify the cell.

edited Sep 17 '19 at 15:59

Andrew Lohr

5,380
1
26
38

answered Sep 17 '19 at 15:58

mbojko

13,503
1
16
26

score 1 · Answer 3 · answered Sep 17 '19 at 16:21

Do you have any ideas for Multidimensional Arrays? You can imagine a table as a Multidimensional Array. It just work like **[row][col].onClick = yourFunction()**

Here i show you an example of 2D array Like...

and you can use js like...

<script language="javascript">
        var tbl = document.getElementById("tblMain");
        if (tbl != null) {
            for (var i = 0; i < tbl.rows.length; i++) {
                for (var j = 0; j < tbl.rows[i].cells.length; j++)
                    tbl.rows[i].cells[j].onclick = function () { getval(this); };
            }
        }
        function getval(cel) {
            alert(cel.innerHTML);
        }

I give you a complete example ...

<html>
<head>
</head>
<body>
    <center>
        Click on below table cell to find its value.
        <br />
        <br />
    </center>
    <table align="center" id="tblMain" border="1" style="cursor: pointer;">
        <tr>
            <td>
                R1C1
            </td>
            <td>
                R1C2
            </td>
            <td>
                R1C3
            </td>
            <td>
                R1C4
            </td>
        </tr>
        <tr>
            <td>
                R2C1
            </td>
            <td>
                R2C2
            </td>
            <td>
                R2C3
            </td>
            <td>
                R2C4
            </td>
        </tr>
        <tr>
            <td>
                R3C1
            </td>
            <td>
                R3C2
            </td>
            <td>
                R3C3
            </td>
            <td>
                R3C4
            </td>
        </tr>
        <tr>
            <td>
                R4C1
            </td>
            <td>
                R4C2
            </td>
            <td>
                R4C3
            </td>
            <td>
                R4C4
            </td>
        </tr>
    </table>
    <br />
    <script language="javascript">
        var tbl = document.getElementById("tblMain");
        if (tbl != null) {
            for (var i = 0; i < tbl.rows.length; i++) {
                for (var j = 0; j < tbl.rows[i].cells.length; j++)
                    tbl.rows[i].cells[j].onclick = function () { getval(this); };
            }
        }
        function getval(cel) {
            alert(cel.innerHTML);
        }
    </script>
</body>
</html>

How do I identify which cell was clicked on a table using javascript?

3 Answers3