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で質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テキストエリアに入力した改行...
-
idの振り直しについて
-
javascriptで画像をテーブルに...
-
javascriptでスロットマシン
-
javascriptでクリックするごと...
-
jquery にて、アラートダイアロ...
-
javascriptで画像の移動
-
テーブルの行数を可変長にした...
-
チェックボックスのON/OFFでVal...
-
正規表現で複数マッチ条件で悩...
-
onchangeイベントを強制的に発...
-
プルダウン 項目が多いので先頭...
-
TextBoxに半角数字以外を入れた...
-
return trueとreturn falseの用...
-
ラジオボタンのチェックが外れ...
-
【jQuery】input nameの文字列...
-
<input>の選択肢をプルダウンメ...
-
【jsp/Java】チェックボックス...
-
特定<table>内の<td>の色を変える
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
テーブルの行数を可変長にした...
-
javascriptで画像をテーブルに...
-
テキストエリアに入力した改行...
-
プルダウンメニューを表の中に...
-
【jQuery】tableループ内のIDの...
-
javascriptで<table>背景色の取得
-
csvファイルのデータを変数とし...
-
javascriptでクリックするごと...
-
Javascriptでテーブルタグの座...
-
table内で上下するfloating men...
-
tbody要素のinnerHTMLが書き換...
-
テーブルのセルのクリック時、...
-
外部CSVをサイトに読み込み表示...
-
Table内TDの子要素を移動させた...
-
指定のテキストをクリックする...
-
javascript でテーブル操作
-
クリックごとに文字色が交互に...
おすすめ情報