How to add a onclick event to a table cell using javascript?

Question

I am adding rows to an existing table using JavaScript insertRow method For one cell, I want to add an onclick event.

How can I do that using pure JavaScript?

I am attaching my code.

<!DOCTYPE html>
<html>
    <head>
        <style>
        table, td {
          border: 1px solid black;
        }
        </style>
    </head>
    <body>    
        <table id="myTable">
          <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
          </tr>

        </table>
        <br>
        <button onclick="myFunction()">Try it</button>
        <script>
        function myFunction() {
          var table = document.getElementById("myTable");
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          cell1.innerHTML = "NEW CELL1";
          cell2.innerHTML = "NEW CELL2";
          cell1.onclick()="xfunc()";
        }

        function xfunc(){
        alert("Hi")
        }
        </script>
  </body>
</html>

You can find your solution at [link](https://stackoverflow.com/questions/1207939/adding-an-onclick-event-to-a-table-row) — Deepak Kumar, Dec 28 '18 at 07:23

score 2 · Accepted Answer · answered Dec 28 '18 at 07:24

2

onclick is a html property, you have assign a function to this property to handler click event.

In you case:

cell1.onclick = xfunc; // instead of cell1.onclick()="xfunc()";

answered Dec 28 '18 at 07:24

hoangdv

15,138
4
27
48

score 0 · Answer 2 · answered Dec 28 '18 at 07:23

Update your function as below

   <script>
        function myFunction() {
          var table = document.getElementById("myTable");
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          cell1.innerHTML = "NEW CELL1";
          cell2.innerHTML = "NEW CELL2";
          cell1.onclick=xfunc;
        }

        function xfunc(){
        alert("Hi")
        }
        </script>

score 0 · Answer 3 · edited Dec 28 '18 at 08:44

I think the problem is that, How you are attaching the event to cell1? Try the following code:

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
    cell1.onclick = xfunc; //<-- problem was on this line
}

score 0 · Answer 4 · answered Dec 28 '18 at 07:27

0

Use the below one.

cell1.addEventListener('click', xfunc);

answered Dec 28 '18 at 07:27

Vamsi

102
9

score 0 · Answer 5 · answered Dec 28 '18 at 07:27

First you could try something really simple:

cell1.setAttribute('onclick', 'xfunc()');

Maybe this already Handles your problem. If not you just could use a DIV inside the cell:

var div = document.createElement('div');
div.setAttribute('onclick', 'xfunc()');
div.setAttribute('style', 'height: 100%; width: 100%');
div.innerHTML = 'NEW CELL1';
cell1.appendChild(div);

This should handle the problem for sure.

The only thing im not really sure about is wether a table-cell is capable of onclick attributes :)

LG

How to add a onclick event to a table cell using javascript?

5 Answers5