
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>
No.2ベストアンサー
- 回答日時:
deleteRowは何も返さず、削除するだけなので
cloneNodeでコピーをとってから削除するか、
removeChildを使って削除する(removeChildは削除したノードを返す)
で、復元する時にはとっておいたノードをinsertRowで戻す。
削除したノードとその位置の保存とかその復元とか…なんか面倒なんで、
#1さんのおっしゃるように、styleを変更し、
ついでに配下のinput(等)のdisabledもtrueにしておいて、
復元する時にはstyleを戻すと同時にdisabledも戻すようしたほうが楽かも。
この回答への補足
ありがとうございました。
わざわざ行自体を削除するのではなく
input disabled と CSSの視覚効果を利用して
INPUTさせない処理に変更いたしました。
質問に対する答えが全て正解では無いということを痛感いたしました。
お忙しいところ柔軟な発想を持って回答いただいたお二人に感謝いたします。
ご返答ありがとうございます。
すっかり凝り固まった頭になってしまっていて根本的な目的を見失っていました。
確かに本来の目的がPOSTさせないであるならば
input disabled を使うのがセオリーですね。。。
完全にはまってしまって行操作以外の脳が有りませんでした。
早々に書き直してみます。
No.1
- 回答日時:
表示非表示したいだけならdelしないでstyleで display:none にしたら良いんじゃないかな
戻す時はblockかinline(元の要素による)にすれば出てくるよ
http://www.tohoho-web.com/js/style.htm
早々のレスポンス感謝いたします。
なるほど!CSSと言う手が!と言う事でソースを書いてみたのですが。
削除された行のフォームをPOSTしないと言う前提で作っているのでCSSで制御するだけでは、残念ながら情報はPOSTされてしまいました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tbody要素のinnerHTMLが書き換...
-
javascriptで画像をテーブルに...
-
スタイルシートを使った(if...
-
プルダウン 項目が多いので先頭...
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
return trueとreturn falseの用...
-
【jsp/Java】チェックボックス...
-
jqueryとscriptでTABLEのセルを...
-
Selectボックスの幅を自動で広...
-
EclipseでSpringを使用し、テー...
-
<input>の選択肢をプルダウンメ...
-
Selectの中身をfor文で入れる
-
プルダウンで選択すると、DBの...
-
プルダウン選択を変更すると、...
-
inputのvalueを変数として使うには
-
Jvasvriptのlengthで個数が取得...
-
送信フォームで送信ボタンをお...
-
データベースの値を判断してラ...
-
CSVデータをツリー表示させたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
新しいウィンドをリンク指定し...
-
jquery にて、アラートダイアロ...
-
指定のテキストをクリックする...
-
テーブルの行数を可変長にした...
-
写真の下に説明文
-
html内>テーブル内に複数のjav...
-
Javascriptでテーブルタグの座...
-
【jQuery】tableループ内のIDの...
-
クリックごとに文字色が交互に...
-
javascript でテーブル操作
-
javascriptのカルーセル
-
a9のサイトの仕組み
-
appendChildとinnerHTMLを短く
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
tbody要素のinnerHTMLが書き換...
-
外部のデータファイルの読み込...
おすすめ情報