実現したいこと
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
試したこと
ここに問題に対して試したことを記載してください。
回答2件
あなたの回答
tips
プレビュー