tdをダブルクリックしたらinputタグにして編集できるようにしたい

前提

vscodeにて、
Incrementsというクラス名がついたtd以外のtd要素を、ダブルクリックしたらinput要素に変えて編集できるようにしたく
（エンターキーが押されるかフォーカスが外れるかするとtd要素に戻すようにしておく）
実装しましたがinputタグに変わらず困っています。
何が間違っているのか分かりません。

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

特になし

該当のソースコード

index.php
1
2<!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  };

どうかよろしくお願いいたします。

行動規範の内容に同意します

回答2件

テーブルを編集したいだけならtableタグにcontenteditable属性をつけるだけではだめですか？
inputにする意図はなにかあるのでしょうか？（たとえばformで送信したいとか）

HTML
1<table border="1" style="border-collapse: collapse" id="tb1">
2↓↓↓
3<table border="1" style="border-collapse: collapse" id="tb1" contenteditable>

投稿2024/02/01 07:43

編集2024/02/01 07:43

yambejp

総合スコア115568

heat

2024/02/01 12:39

ありがとうございます。その方法は知りませんでした。

行動規範の内容に同意します

ベストアンサー

js
1    document.querySelector("td").addEventListener("dblclick", function() {

現在のこのコードですと、ページ中の最初の <td> だけがダブルクリックに反応することになります。

すべての <td> に対応させるには、以下のようにイベント委譲を使うと簡単です。

js
1    document.addEventListener("dblclick", function(event) {
2      if (!event.target.closest('td'))
3        return;
4      var td = event.target.closest('td');
5      var parent = td.parentNode;

投稿2024/02/01 07:42

編集2024/02/01 07:45

int32_t

総合スコア21301

heat

2024/02/01 12:42

ありがとうございます。下記のように書き換えたところ、一番下のparent.replaceChild(input, td);の部分でエラー Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node. at HTMLDocument.<anonymous> が発生してしまいましたが、どこが間違っているか分かりません。教えて頂けないでしょうか？ window.onload = function() { document.addEventListener("dblclick", function(event) { if (!event.target.closest('td')) return; var td = event.target.closest('td'); var parent = td.parentNode; var td = this; var input = document.createElement("input"); input.setAttribute("type", "text"); input.value = td.innerText; // エンターキーが押されるかフォーカスが外れるかするとtd要素に戻すようにしておく // エンターキーが押された場合 input.addEventListener("keydown", function(e) { if(e.keyCode === 13) { td.innerText = this.value; parent.replaceChild(td, this); } }); // フォーカスが外れた場合 input.addEventListener("blur", function() { td.innerText = this.value; parent.replaceChild(td, this); }); parent.replaceChild(input, td); input.focus(); }); };

int32_t

2024/02/01 13:43

> エラー Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node. その問題は元の問題である「tdをダブルクリックしたらinputタグにして編集できるようにしたい」とは別件だと思いますので、新しい質問を立てるべきかと思います。

heat

2024/02/01 14:17

よく見たらvar tdを二回定義していました。解決しました。 yambejp様もありがとうございました。

int32_t

2024/02/01 22:37

> よく見たらvar tdを二回定義していました。ああ、まったく動いてなかったんですね。失礼しました。 inputへの切り替えはうまく動いていて、Enterキーを押すとDOMException が出るという話かと思ってました。

行動規範の内容に同意します

あなたの回答