Don't use in-line JavaScript, separate your behaviour from your data and it gets much easier to handle. I'd suggest the following:
var table = document.getElementById('tableID'),
cells = table.getElementsByTagName('td');
for (var i=0,len=cells.length; i<len; i++){
cells[i].onclick = function(){
console.log(this.innerHTML);
/* if you know it's going to be numeric:
console.log(parseInt(this.innerHTML),10);
*/
}
}
var table = document.getElementById('tableID'),_x000D_
cells = table.getElementsByTagName('td');_x000D_
_x000D_
for (var i = 0, len = cells.length; i < len; i++) {_x000D_
cells[i].onclick = function() {_x000D_
console.log(this.innerHTML);_x000D_
};_x000D_
}
_x000D_
th,_x000D_
td {_x000D_
border: 1px solid #000;_x000D_
padding: 0.2em 0.3em 0.1em 0.3em;_x000D_
}
_x000D_
<table id="tableID">_x000D_
<thead>_x000D_
<tr>_x000D_
<th>Column heading 1</th>_x000D_
<th>Column heading 2</th>_x000D_
<th>Column heading 3</th>_x000D_
<th>Column heading 4</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>43</td>_x000D_
<td>23</td>_x000D_
<td>89</td>_x000D_
<td>5</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>3</td>_x000D_
<td>0</td>_x000D_
<td>98</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>10</td>_x000D_
<td>32</td>_x000D_
<td>7</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>
_x000D_
A revised approach, in response to the comment (below):
You're missing a semicolon. Also, don't make functions within a loop.
This revision binds a (single) named function as the click
event-handler of the multiple <td>
elements, and avoids the unnecessary overhead of creating multiple anonymous functions within a loop (which is poor practice due to repetition and the impact on performance, due to memory usage):
function logText() {
// 'this' is automatically passed to the named
// function via the use of addEventListener()
// (later):
console.log(this.textContent);
}
// using a CSS Selector, with document.querySelectorAll()
// to get a NodeList of <td> elements within the #tableID element:
var cells = document.querySelectorAll('#tableID td');
// iterating over the array-like NodeList, using
// Array.prototype.forEach() and Function.prototype.call():
Array.prototype.forEach.call(cells, function(td) {
// the first argument of the anonymous function (here: 'td')
// is the element of the array over which we're iterating.
// adding an event-handler (the function logText) to handle
// the click events on the <td> elements:
td.addEventListener('click', logText);
});
function logText() {_x000D_
console.log(this.textContent);_x000D_
}_x000D_
_x000D_
var cells = document.querySelectorAll('#tableID td');_x000D_
_x000D_
Array.prototype.forEach.call(cells, function(td) {_x000D_
td.addEventListener('click', logText);_x000D_
});
_x000D_
th,_x000D_
td {_x000D_
border: 1px solid #000;_x000D_
padding: 0.2em 0.3em 0.1em 0.3em;_x000D_
}
_x000D_
<table id="tableID">_x000D_
<thead>_x000D_
<tr>_x000D_
<th>Column heading 1</th>_x000D_
<th>Column heading 2</th>_x000D_
<th>Column heading 3</th>_x000D_
<th>Column heading 4</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>43</td>_x000D_
<td>23</td>_x000D_
<td>89</td>_x000D_
<td>5</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>3</td>_x000D_
<td>0</td>_x000D_
<td>98</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>10</td>_x000D_
<td>32</td>_x000D_
<td>7</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>
_x000D_
References: