Javascript onClick event in all cells

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...

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.

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>

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