所有单元格中的 Javascript onClick 事件

Question

I'm learning JavaScript and I've not that much experience. But I'm making a HTML table and I want to add in every table cell ( <td> ) a onClick event.

<table id="1">
    <tr>
        <td onClick="tes()">1</td><td onClick="tes()">2</td>
    </tr>
    <tr>
        <td onClick="tes()">3</td><td onClick="tes()">4</td>
    </tr>
</table>

Is there another way to do this event in every cell?

Answer 1

I know this is a bit old, but you should use a click envent on the table and use the target value to get the cell. Instead of having a 10 x 10 table = 100 event you will have only 1.

The best thing with that method is when you add new cells you don't need to bind an event again.

 $(document).ready( function() { $('#myTable').click( function(event) { var target = $(event.target); $td = target.closest('td'); $td.html(parseInt($td.html())+1); var col = $td.index(); var row = $td.closest('tr').index(); $('#debug').prepend('<div class="debugLine">Cell at position (' + [col,row].join(',') + ') clicked!</div>' ); }); });

 td { background-color: #555555; color: #FFF; font-weight: bold; padding: 10px; cursor: pointer; } #debug { background-color: #CCC; margin-top: 10px; padding: 10px; } #debug .debugLine { margin: 2px 0; padding: 1px 5px; background-color: #EEE; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </table> <div id="debug"></div>

Answer 2

There are two ways:

var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
   cells[i].onclick = function(){tes();};
}

and the other way using jQuery:

$('td').click(function(){tes();});

upd:

To get exactly what is needed, firstly the table must be selected, so, for the first option:

var table = document.getElementById('1');
var cells = table.getElementsByTagName("td"); 
...

and for the second, the jQ selector should be like this:

$('#1 td')

Answer 3

You may try this too (using event delegation)

window.onload = function(){
    document.getElementById('tbl1').onclick = function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(target.tagName.toLowerCase() ==  "td") {
            alert(target.innerHTML);
        }
    };
};

EXAMPLE.

Using jQuery

$(function(){
    $('#tbl1').on('click', 'td', function(){
        alert($(this).html());
    });
});

EXAMPLE.

Answer 4

Just the following code will return the contained text of the clicked element. In this case the td

event.target.innerText

Example:

 td { border: 1px solid red; }

 <table onclick="alert(event.target.innerText)"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table>

Of course you can implement it into a js and attach it to the onclick event as usual (search for the addEventListener() function in javascript). If needed you can separate the table into thead, tbody tfoot and add the onclick event to the tbody only. In this way the event will be triggered only if the user clicks on this section of the table and not when he clicks on other elements...

Answer 5

Try :

var tds = document.getElementsByTagName("td");

for(var i in tds) tds[i].onclick = tes;

and a Demo ...

---

Replace document with any other dom element that you need to find td's in.

Answer 6

You can do something like that:

  var tbl = document.getElementById("1");
    var numRows = tbl.rows.length;

    for (var i = 1; i < numRows; i++) {
        var ID = tbl.rows[i].id;
        var cells = tbl.rows[i].getElementsByTagName('td');
        for (var ic=0,it=cells.length;ic<it;ic++) {
            cells[ic].OnClick = new function() {tes()};
        }
    }

Answer 7

if you have access to jquery, do this

$('#1 td').click(function(){

});

Answer 8

You might not require putting onclick event on every TD element in your table. Providing onclick event at the table level can do the trick easily as shown in the below code snippet:

 function tes(event) { if (event.target.nodeName == "TD") { alert('TD got clicked'); } }

 td { border: 1px solid black; }

 <html> <head> <title>Tic-Tac-Toe</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <table id='gameBoard' width="300" height="300" onclick="tes(event);"> <tr> <td data-index = "0 0"></td> <td data-index = "0 1"></td> <td data-index = "0 2"></td> </tr> <tr> <td data-index = "1 0"></td> <td data-index = "1 1"></td> <td data-index = "1 2"></td> </tr> <tr> <td data-index = "2 0"></td> <td data-index = "2 1"></td> <td data-index = "2 2"></td> </tr> </table> </div> </body> </html>

You can do the appropriate handling inside tes function with the help of event parameter.