- ベストアンサー
テーブルの項目の値取得
テーブルの項目にボタンを配置し、そのボタンが押された時には、 その行のデータを別ウィンドウで開き、編集する。 というような物を書きたいのですが、 ボタンを押した際にその行の情報を取得するにはどうしたらよいでしょうか? また、その行の見えない所(内部的な処理にのみ使える)にコードを持たせておくような事は可能なのでしょうか。 <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)
- 専門家の回答
質問者が選んだベストアンサー
>また、その行の見えない所(内部的な処理にのみ使える)にコードを持たせておくような事は可能なのでしょうか。 コードって言うのがどのようなものかわかりませんが、文字列でよければ、ボタンと一緒にHidden要素を並べたらどうでしょう? 編集ってことで、サーバー側でHTMLを動的に生成してるのを前提に参考意見を。 違ってたらスルーしてください。 各行のHTMLを生成中に、データをループして書き出してると思うのですが、各データのユニークなキーを、HTMLのボタンのonclick内に埋め込みつつHTMLを生成していきます。 <input type="button" value="編集" onclick="edit('ユニークなキー')" /> JavaScript側では、編集用の関数が受け取ったユニークなキーを、パラメータに追加して送信する。 (追加は、hidden要素を使うなりなんなりと。) このような構成で編集画面を開けば、パラメータで受け取ったユニークなキーを利用して、そのデータの編集画面が開けます。
その他の回答 (1)
<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="その行の1番目" onclick="alert(tbcolval(this,0))" /> <input type="button" value="その行の2番目" 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>
お礼
返信ありがとうございます。 確かにこうする事で取得が可能なんですね! 書いている事をそのまま取得したい部分もありましたので、活用させていただきます☆ ありがとうございました!
お礼
まさにご指摘通りの考え方の作りを考えていました! <input type="button" value="編集" onclick="edit('ユニークなキー')" /> これで解決しました!! ループで動的に作成する際、ボタンにユニークキーを割り付けられるとは思いませんでした。 ありがとうございました☆