(なぜ誰もが jQuery を想定しているのですか?)
イベント委任を使用しており、画像がセルの背景として設定されていると想定しています。私はこれを最初の行で完了しただけで、css がテーブルに適用される場合、nbsp は必要ありません。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table id="tblLetters">
<tr><td data-lett="A"> </td><td data-lett="B"> </td><td data-lett="C"> </td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>
<input type="text" id="results">
<script type="text/javascript">
var addEvent = function (elem, eventType, func) {
if ( elem.addEventListener )
addEvent = function (elem, eventType, func) {
elem.addEventListener(eventType, func, false);
};
else if ( elem.attachEvent )
addEvent = function (elem, eventType, func) {
elem.attachEvent('on' + eventType, func);
};
addEvent(elem, eventType, func);
};
var delegateEvent = function (elem, childElems, eventType, func) {
addEvent(elem, eventType, function (e) {
var evt = e || window.event;
var elem = evt.target || evt.srcElement;
if ( elem.nodeName.toLowerCase() == childElems ) {
func(elem);
}
});
};
function updateResults(cell) {
document.getElementById('results').value += cell.getAttribute('data-lett');
}
delegateEvent(document.getElementById('tblLetters'), 'td', 'click', updateResults);
</script>
</body>
</html>