掲示板/JavaScript質問板/過去ログ/一覧/ 表を作成し特定のセルの値を拾いたい

0 名前：鶏頭： 2006/08/18（金） 19:24 ID:DSQfMiUT: ある書籍を参考に.csvファイルからデータを読み出して表形式で表示するページを作ったのですが
表中のセルにある値を変数に代入したいのですが、うまくいきません。

var aa=document.all.oTable.tBodies[x].rows[0].cells[y].innerText;

として、ｘ行目、ｙ列目の値をaaに入れたいのですが、
表自体を検索や並び替えできるようにしているので何番目かは毎回変わってきてしまい
使えません。

また、以下のように
<TD><A OnClick="bg(bb)"><DIV DATAFLD="no" ALIGN="center"></DIV></A></TD>

セルをクリックしたときにそのセル内の値を取り出せるようにできれば、とも考えましたが
これも上手くいきませんでした。

セルをクリックしたときに、クリックしたそのセルが何行、何列目にあるかを取得する方法や
クリックしたセルの値を変数に代入する方法は無いものでしょうか？

わかりづらい説明かもしれませんが、アドバイスをよろしくお願いします。

1 名前： sevi- ： 2006/08/18（金） 19:24 ID:PQukhZTw

テーブルセル個々に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>

2 名前：鶏頭： 2006/08/18（金） 19:24 ID:DSQfMiUT: sevi-さん

アドバイスありがとうございました。
おかげさまで無事解決しました。