テーブルセル個々にonclickイベントハンドラに関数を代入した場合、
代入した関数内でthisオブジェクトに代入される対象はクリックしたセルそのものになる.
なので、onclickイベントハンドラ内でthisを操作すれば良い.
全セルにonclickイベントハンドラを手書きで代入するのは保守作業に難があるので
コード上でループ処理を用い代入するのが良い.以下に例を示す.
序でにセル内(というか要素内)のテキストを取り出す関数も提示しておく.
sevi-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
//tableのtbody内の全cellにonclickイベントハンドラを設定.
function initialize_table(tbl)
{
var cell;
for(var i=0; i<tbl.tBodies.length; i++)
{
for(var j=0; j<tbl.tBodies[i].rows.length; j++)
{
for(var k=0; k<tbl.tBodies[i].rows[j].cells.length; k++)
{
cell = tbl.tBodies[i].rows[j].cells[k];
cell.onclick = cell_onclick;
}
}
}
}
//onclickイベントハンドラ.
function cell_onclick()
{
var stext_cell = getInnerText(this);
alert(stext_cell);
}
//引数に与えられたノード内部の全テキストを連結し返す.
function getInnerText(node)
{
switch(node.nodeType)
{
case 3:
return node.nodeValue;
break;
case 1:
case 9:
var texts = new Array();
for(var i=0; i<node.childNodes.length; i++)
texts[texts.length] = getInnerText(node.childNodes[i]);
return texts.join("");
break;
}
}
</script>
</head>
<body onload="initialize_table(document.getElementById('tbl'));">
<table id="tbl">
<thead>
<tr>
<th>
<span>No.</span>
</th>
<th>
<span>text</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>1</span>
</td>
<td>
<span>蛙</span>
</td>
</tr>
<tr>
<td>
<span>2</span>
</td>
<td>
<span>蛇</span>
</td>
</tr>
<tr>
<td>
<span>3</span>
</td>
<td>
<span>犬</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>