質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

561閲覧

tdをダブルクリックしたらinputタグにして編集できるようにしたが、enterキーを押すとエラーになる。

Riehlvelt_love

総合スコア44

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2024/02/02 04:02

実現したいこと

vscode,xamppにて
tdをダブルクリックしたらinputタグにして編集できるようにしましたが、enterキーを押すとエラーになります。
動作自体は問題ありません。
エラーの解決方法が分かりません。どなたか教えてください。

発生している問題・エラーメッセージ

input.js:77 Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?

該当のソースコード

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <title>Document</title> </head> <body> <table border="1" style="border-collapse: collapse" id="tb1" > <tbody><tr> <th>インクリメントID</th> <th>ID</th> <th>名前</th> <th>性別</th> <th>スコア</th> <th>日</th> <th>スコア2</th> </tr> <!-- テーブル表示 --> <tr> <td>1</td> <td>1</td> <td> 仁</td> <td>0</td> <td> 100点</td> <td>2023-12-07</td> <td>365</td> </tr> <tr> <td>2</td> <td>2</td> <td> 銀</td> <td>0</td> <td> 50点</td> <td>2023-02-01</td> <td>50</td> </tr> <tr> <td>3</td> <td>3</td> <td> 灯</td> <td>0</td> <td> 70点</td> <td>2022-10-13</td> <td>100</td> </tr> <tr> <td>4</td> <td>4</td> <td> 凪</td> <td>0</td> <td> 90点</td> <td>2024-02-01</td> <td>0</td> </tr> <tr> <td>5</td> <td>1</td> <td> 仁</td> <td>0</td> <td> 100点</td> <td>2023-09-10</td> <td>200</td> </tr> </tbody></table> <!-- <script src="remind.js"></script> --> <script src="input.js"></script> </body> </html>

input.js

1$(function() { 2 3 $("tr td:nth-child(1)").addClass("Increments"); 4 // $("tr td:last-child").after('<td><form method="post" action="form.php"><button class="save" value="1" type=submit>保存</button></form></td>'); 5 6 $('td').each(function(i){ 7 8 var text=$(this).text(); 9 $(this).attr('name',text); 10 11 }); 12 13 14 $('.save').each(function(i){ 15 $(this).attr('name',(i+1)); 16 $(this).attr('value',(i+1)); 17 }); 18 19}); 20 21 22window.onload = function() { 23 document.addEventListener("dblclick", function(event) { 24 if (!event.target.closest('td')) 25 return; 26 27 if(event.target.classList.contains('Increments')) 28 return; 29 30 var td = event.target.closest('td'); 31 var parent = td.parentNode; 32 33 var input = document.createElement("input"); 34 35 input.setAttribute("type", "text"); 36 input.value = td.innerText; 37 38 // エンターキーが押されるかフォーカスが外れるかするとtd要素に戻すようにしておく 39 // エンターキーが押された場合 40 input.addEventListener("keydown", function(e) { 41 if(e.keyCode === 13) { 42 td.innerText = this.value; 43 parent.replaceChild(td, this); 44 45 } 46 }); 47 48 // フォーカスが外れた場合 49 input.addEventListener("blur", function() { 50 td.innerText = this.value; 51 parent.replaceChild(td, this); 52 53 }); 54 55 parent.replaceChild(input, td); 56 57 input.focus(); 58 }); 59 }; 60 61 62 63 64

試したこと

ここに問題に対して試したことを記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2024/02/02 04:12

しつこいようですが、何のためにinputが必要なのでしょうか?サブミットしないなら不要ですよね?
Riehlvelt_love

2024/02/02 04:18

教えて頂いたcontenteditable属性でも編集は可能なのですが、自分の学習のためにエラー解決法を知りたく質問致しました。
Lhankor_Mhy

2024/02/02 04:24

問題が再現しませんでした。問題の再現手順を具体的に教えてください。
yambejp

2024/02/02 04:39

なんか難しく考えすぎでしょう dblclick,keydown,blurを処理するだけです、シンプルに考えてください
guest

回答2

0

変なことしなくてもこれで十分な気がしますが・・

javascript

1document.addEventListener('dblclick',({target})=>{ 2 if(target.matches('#tb1 td')){ 3 target.contentEditable=true; 4 target.focus(); 5 } 6}); 7document.addEventListener('keydown',e=>{ 8 if(e.key=="Enter"){ 9 e.target.blur(); 10 } 11}); 12document.addEventListener('blur',({target})=>{ 13 if(target instanceof HTMLElement && target.matches('[contentEditable]')){ 14 target.removeAttribute('contentEditable'); 15 } 16},true);

投稿2024/02/02 04:36

yambejp

総合スコア117755

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Riehlvelt_love

2024/02/02 04:51

参考に致します。ありがとうございます。
guest

0

ベストアンサー

js

1parent.replaceChild(td, this);

Enterキーを押すとこれが実行されるわけですが、replaceChidl() の中では、まず第2引数のノードがドキュメントツリーから切り離されます。そのときにそのノードがフォーカスされていた場合はフォーカスを解除するため、blur イベントが発生します。質問文のコードでは blur イベントリスナで同じく replaceChild(td, this) が実行され、ノードの入れ替えが成立します。最初の replaceChild() の処理に戻ると第2引数のノードは既にドキュメントから切り離されているので例外になるわけです。

簡単に直すには、Enterキーの処理を parent.replaceChild(td, this) から this.blur() にしてしまえばよいでしょう。

投稿2024/02/02 04:20

int32_t

総合スコア21929

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Riehlvelt_love

2024/02/02 04:24

回答ありがとうございます。 試したところ問題が解決しました! ベストアンサーに選ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問