前提
vscodeにて、
Incrementsというクラス名がついたtd以外のtd要素を、ダブルクリックしたらinput要素に変えて編集できるようにしたく
（ エンターキーが押されるかフォーカスが外れるかするとtd要素に戻すようにしておく）
実装しましたがinputタグに変わらず困っています。
何が間違っているのか分かりません。
発生している問題・エラーメッセージ
特になし
該当のソースコード
index.php
12<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 8 <title>Document</title> 9</head> 10<body> 11<table border="1" style="border-collapse: collapse" id="tb1"> 12<tbody><tr> 13 <th>インクリメントID</th> 14 <th>ID</th> 15 <th>名前</th> 16 <th>性別</th> 17 <th>スコア</th> 18 19</tr> 20 21<!-- テーブル表示 --> 22<tr> 23<td>1</td> 24<td>1</td> 25<td> ayana</td> 26<td>0</td> 27<td> 100点</td> 28 29</tr> 30<tr> 31<td>2</td> 32<td>2</td> 33<td> rena</td> 34<td>0</td> 35<td> 50点</td> 36 37</tr> 38<tr> 39<td>3</td> 40<td>3</td> 41<td> kana</td> 42<td>0</td> 43<td> 70点</td> 44 45</tr> 46<tr> 47<td>4</td> 48<td>4</td> 49<td> 凪</td> 50<td>0</td> 51<td> 90点</td> 52 53</tr> 54<tr> 55<td>5</td> 56<td>1</td> 57<td> 仁</td> 58<td>0</td> 59<td> 100点</td> 60 61</tr> 62</tbody></table> 63 64<script src="input.js"></script> 65</body> 66</html>
input.js
1$(function() { 2 3 $("tr td:nth-child(1)").addClass("Increments"); 4 5 6}); 7 8 9window.onload = function() { 10 document.querySelector("td").addEventListener("dblclick", function() { 11 var parent = this.parentNode; 12 var td = this; 13 var input = document.createElement("input"); 14 15 input.setAttribute("type", "text"); 16 input.value = td.innerText; 17 18 // エンターキーが押されるかフォーカスが外れるかするとtd要素に戻すようにしておく 19 // エンターキーが押された場合 20 input.addEventListener("keydown", function(e) { 21 if(e.keyCode === 13) { 22 td.innerText = this.value; 23 parent.replaceChild(td, this); 24 } 25 }); 26 27 // フォーカスが外れた場合 28 input.addEventListener("blur", function() { 29 td.innerText = this.value; 30 parent.replaceChild(td, this); 31 }); 32 33 parent.replaceChild(input, td); 34 35 input.focus(); 36 }); 37 };
どうかよろしくお願いいたします。
0 コメント