テーブルの項目の値取得

解決済

質問者：32CooperS
質問日時：2008/06/10 15:24
回答数：2件

テーブルの項目にボタンを配置し、そのボタンが押された時には、
その行のデータを別ウィンドウで開き、編集する。

というような物を書きたいのですが、
ボタンを押した際にその行の情報を取得するにはどうしたらよいでしょうか？

また、その行の見えない所（内部的な処理にのみ使える）にコードを持たせておくような事は可能なのでしょうか。

<table border="0" cellpadding="0" cellspacing="0" class="playguide-list">
<tr>
<th class="head">名前</th>
<th class="head-tel">電話番号</th>
<th class="head-tel">ファックス</th>
<th class="head-syori">処理</th>
</tr>
<tr>
<td>＊＊＊＊＊＊</td>
<td>＊＊＊＊＊＊</td>
<td>＊＊＊＊＊＊</td>
<td>
<input type="button" value="編集" onclick="" />
<input type="button" value="削除" onclick="" />
</td>
</tr>
</table>

このような感じです。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： HIRSYU
回答日時：2008/06/10 17:44

>また、その行の見えない所（内部的な処理にのみ使える）にコードを持たせておくような事は可能なのでしょうか。

コードって言うのがどのようなものかわかりませんが、文字列でよければ、ボタンと一緒にHidden要素を並べたらどうでしょう？

編集ってことで、サーバー側でHTMLを動的に生成してるのを前提に参考意見を。
違ってたらスルーしてください。

各行のHTMLを生成中に、データをループして書き出してると思うのですが、各データのユニークなキーを、HTMLのボタンのonclick内に埋め込みつつHTMLを生成していきます。
<input type="button" value="編集" onclick="edit('ユニークなキー')" />

JavaScript側では、編集用の関数が受け取ったユニークなキーを、パラメータに追加して送信する。
（追加は、hidden要素を使うなりなんなりと。）

このような構成で編集画面を開けば、パラメータで受け取ったユニークなキーを利用して、そのデータの編集画面が開けます。

- 0
- 件

通報する

この回答へのお礼

まさにご指摘通りの考え方の作りを考えていました！
<input type="button" value="編集" onclick="edit('ユニークなキー')" />
これで解決しました！！

ループで動的に作成する際、ボタンにユニークキーを割り付けられるとは思いませんでした。

ありがとうございました☆

通報する

お礼日時：2008/06/10 19:15

No.1

回答者： _pipi_
回答日時：2008/06/10 17:17

<html>

<body>
<table border="1" cellpadding="0" cellspacing="0" class="playguide-list">
<tr>
<th class="head">名前</th>
<th class="head-tel">電話番号</th>
<th class="head-tel">ファックス</th>
<th class="head-syori">処理</th>
</tr>
<tr>
<td>ドラえもん募金</td>
<td>0990-513-006</td>
<td>1234-567-890</td>
<td>
<input type="button" value="その行の１番目" onclick="alert(tbcolval(this,0))" />
<input type="button" value="その行の２番目" onclick="alert(tbcolval(this,1))" />
</td>
</tr>
</table>
＞また、その行の見えない所（内部的な処理にのみ使える）にコードを持たせておくような事は可能なのでしょうか。
<br>ちと意味がわかりません。

<script>
function tbcolval(o,n){
return parentSearch(o,'TR').childNodes.item(n).innerHTML;
}
function parentSearch(o,t){while(o.tagName!=t)o=o.parentNode;return o;}//親node探し

</script>