- ベストアンサー
javascript でテーブル操作
javascriptのdeleteRowで削除したテーブルの行を再表示する方法を探しております。 下記ソース内reload.gifをクリックするとdeleteRowで消えた行をまとめて表示したいのですが何か良い方法は無いでしょうか？ (＊)ブラウザの再表示は使えません。 <html> <head> <title></title> <script language="JavaScript" type="text/JavaScript"><!-- function Delline(tablename,num){ document.getElementById (tablename).deleteRow(num); } //--></script> </head> <body> <img src="reload.gif"> <table id="table1"> <tr onmouseover="asrow1 = this.rowIndex"> <td class="ChkTD41">ああ<img src="del.gif" onclick="Delline('table1',asrow1)" /> <input type="text" name="a1"> </td> </tr> <tr onmouseover="asrow2 = this.rowIndex"> <td class="ChkTD41">いい<img src="del.gif" onclick="Delline('table1',asrow2)" /> <input type="text" name="b1"> </td> </tr> <tr onmouseover="asrow3 = this.rowIndex"> <td>うう<img src="del.gif" onclick="Delline('table1',asrow3)" /> <input type="text" name="c1"> </td> </tr> </table> </body> </html>
- anzam
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
deleteRowは何も返さず、削除するだけなので cloneNodeでコピーをとってから削除するか、 removeChildを使って削除する(removeChildは削除したノードを返す) で、復元する時にはとっておいたノードをinsertRowで戻す。 削除したノードとその位置の保存とかその復元とか…なんか面倒なんで、 #1さんのおっしゃるように、styleを変更し、 ついでに配下のinput(等)のdisabledもtrueにしておいて、 復元する時にはstyleを戻すと同時にdisabledも戻すようしたほうが楽かも。
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
表示非表示したいだけならdelしないでstyleで display:none にしたら良いんじゃないかな 戻す時はblockかinline(元の要素による)にすれば出てくるよ http://www.tohoho-web.com/js/style.htm
お礼
早々のレスポンス感謝いたします。 なるほど！ＣＳＳと言う手が！と言う事でソースを書いてみたのですが。 削除された行のフォームをPOSTしないと言う前提で作っているのでCSSで制御するだけでは、残念ながら情報はPOSTされてしまいました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ご返答ありがとうございます。 すっかり凝り固まった頭になってしまっていて根本的な目的を見失っていました。 確かに本来の目的がPOSTさせないであるならば input disabled を使うのがセオリーですね。。。 完全にはまってしまって行操作以外の脳が有りませんでした。 早々に書き直してみます。
補足
ありがとうございました。 わざわざ行自体を削除するのではなく input disabled と CSSの視覚効果を利用して INPUTさせない処理に変更いたしました。 質問に対する答えが全て正解では無いということを痛感いたしました。 お忙しいところ柔軟な発想を持って回答いただいたお二人に感謝いたします。