TD要素を取得して、ボタン押下するとTD要素の中身を編集状態可能状態にしたい
HTMLで定義したTableのtd要素をJavaScriptで編集できる画面を作成しています。
色々なサイトを検索したり、コードを打ち込んで実行させてみたのですが特定のTD要素を取得する方法が思いつかず困っています。
実装方法などがあればご教授頂きたいです。
実現したい動作
「編集」ボタンを押下するとTable内にあるtd要素の中身『input type="text" readonly value="あああ"』
を書き込める状態を実現したいです。
下記の画像からであれば、住所とメモが書き込める状態(readonlyが外れる)を実現したいです
該当するソースコード
<body> <table border="1" id="tbl"> <tr> <th>名前</th> <th>住所</th> <th>メモ</th> </tr <tr> <td><input type="text" id="txt1" name="txt1" value="田中" readonly style="background-color:transparent; border: none;"></td> <td><input type="text" id="txt1" name="txt1" value="佐藤" readonly style="background-color:transparent; border: none;"></td> <td><input type="text" id="txt1" name="txt1" value="阿部" readonly style="background-color:transparent; border: none;"></td> </tr> <tr> <td><input type="text" id="txt1" name="txt1" value="大阪" readonly style="background-color:transparent; border: none;"></td> <td><input type="text" id="txt1" name="txt1" value="東京" readonly style="background-color:transparent; border: none;"></td> <td><input type="text" id="txt1" name="txt1" value="福島" readonly style="background-color:transparent; border: none;"></td> </tr> <tr> <td><input type="text" id="txt1" name="txt1" value="ああああ" readonly style="background-color:transparent; border: none;"></td> <td><input type="text" id="txt1" name="txt1" value="いいいい" readonly style="background-color:transparent; border: none;"></td> <td><input type="text" id="txt1" name="txt1" value="うううう" readonly style="background-color:transparent; border: none;"></td> </tr> </table> <button class="" onclick="editRow()">編集</button> <script> function editRow() { } </script> </body>
自分で試したこと
https://www.northwind.mydns.jp/samples/table_sample1.php
上記のサイトを参考に作成しています。
ただ、上記のサイトではテーブル内に編集ボタンを配置させて、ボタンを押下すると親の要素を取得して
td要素を取ってくる仕組みなっています。
テーブル外にボタンを配置させたとき、どのようにしてtd要素を取ってくるのかがいまいちよくわかりません。
0 コメント