leon2009sp,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td[background]{
cursor: pointer;
text-align: center;
}
</style>
</head>
<body>
<table width="400" summary="" >
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td background="http://javascript.ru/forum/images/smilies/smile.gif">1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td background="http://javascript.ru/forum/images/smilies/smile.gif">Cell 2.3</td>
</tr>
</tbody>
</table>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('td[background]'), function(item) {
item.addEventListener('click', function() {
var background = item.getAttribute('background') == 'http://javascript.ru/forum/images/smilies/smile.gif' ?
'http://javascript.ru/forum/images/smilies/dance3.gif' : 'http://javascript.ru/forum/images/smilies/smile.gif'
item.setAttribute('background', background)
});
});
});
</script>
</body>
</html>