情報を格納する機能を追加したい

実現したいこと

情報を格納する機能を追加したい。

前提

一覧に選択ボタンを用意し、選択ボタンが押されたら一覧から情報を消す。
選択した情報一覧という項目を別に用意して、選択ボタンが押された情報はこの選択した情報一覧に入れる機能を作成したい。
下記ejsコードの146~165が今回問題としている記述です。
今回使用している情報一覧はmysqlから持ってきています。（この下の質問のところに載せました。）

該当のソースコード

ejs
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <link rel="stylesheet" type="text/css" href="/new/public/style.css">
6        <title>顧客情報管理システム</title>
7    </head>
8    <body>
9        <div class="table1">
10            <table>
11                <tr>
12                    <th>ID</th>
13                    <th>名前</th>
14                    <th>ふりがな</th>
15                    <th>性別</th>
16                    <th>メールアドレス</th>
17                    <th>電話番号</th>
18                    <th>住所</th>
19                    <th>都道府県</th>
20                    <th>世帯</th>
21                    <th>更新</th>
22                    <th>削除</th>
23                    <th>選択</th>
24                </tr>
25                <tbody id="list">
26                    <% personas.forEach(function(value) { %>
27                        <tr>
28                            <td>
29                                <%= value.id %>
30                            </td>
31                            <td>
32                                <%= value.name %>
33                            </td>
34                            <td>
35                                <%= value.kana_name %>
36                            </td>
37                            <td>
38                                <%= value.gender %>
39                            </td>
40                            <td>
41                                <%= value.email %>
42                            </td>
43                            <td>
44                                <%= value.phone %>
45                            </td>
46                            <td>
47                                <%= value.address %>
48                            </td>
49                            <td>
50                                <%= value.workplace %>
51                            </td>
52                            <td>
53                                <%= value.household %>
54                            </td>
55                            <td><a href="/edit/<%= value.id %>"><button>更新</button></a></td>
56                            <td><a href="/delete/<%= value.id %>"><button>削除</button></a></td>
57                            <td><a href="/selection/<%= value.id %>"><button class="selectButton">選択</button></a></td>
58                        </tr>
59                        <% }); %>
60                </tbody>
61                <thead id="list2">
62                </thead>
63            </table>
64            <p><input type="text" id="searchText" placeholder="検索キーワードを入力"></p>
65            <p><button id="checkButton1">検索</button></p>
66            <p class="newmember1"><a href="/create1">ユーザーの追加</a></p>
67            <p class="newmember2"><a href="/create2">選択した情報一覧</a></p>
68        </div>
69        <style>
70            table,
71            th,
72            td {
73                font-size: 12px;
74                border: 1px #000 solid;
75                border-collapse: collapse;
76                padding: 10px;
77            }
78
79            th {
80                color: #fff;
81                background-color: #777;
82            }
83
84            td {
85                text-align: center;
86            }
87
88            .table1 {
89                display: flex;
90            }
91
92            input {
93                margin: 0 20px;
94            }
95
96            .newmember1 {
97                position: absolute;
98                top: 70px;
99                left: 1080px;
100            }
101
102            .newmember2 {
103                position: absolute;
104                top: 110px;
105                left: 1080px;
106            }
107        </style>
108        <script type="text/javascript">
109            //ボタンがクリックされたときの処理
110            function buttonClick1() {
111                let list = document.getElementById('list');
112                list.remove()
113                //名前を検索して表示させる処理をする関数を実行
114                usersSearch1();
115            }
116            //変数宣言
117            let checkButton1 = document.getElementById("checkButton1");
118            checkButton1.addEventListener("click", buttonClick1);
119            //名前を検索して表示させる処理
120            function usersSearch1() {
121                let memberUser = JSON.parse('<%= JSON.stringify(personas) %>'.replace(/&#34;/g, '"'));
122                //空の配列を用意
123                let newMember1 = [];
124                for (let i = 0; i < memberUser.length; i++) {
125                    let input = document.getElementById("searchText");
126                    let getValue1 = input.value;
127                    let getName = memberUser[i].name;
128                    //文字列を検索
129                    let members = getName.indexOf(getValue1);
130                    if (members !== -1) {
131                        //空の配列に追加する
132                        newMember1.push(memberUser[i]);
133                        console.log(newMember1);
134                    }
135                }
136                //ブラウザに表示
137                newMember1.forEach(function (value) {
138                    let td = document.getElementById('list2');
139                    td.insertAdjacentHTML(
140                        "beforebegin",
141                        `<tr class=memberUser><td>${value.id}</td><td>${value.name}</td><td>${value.kana_name}</td><td>${value.gender}</td><td>${value.email}</td><td>${value.phone}</td><td>${value.address}</td><td>${value.workplace}</td><td>${value.household}</td><td><button>更新</button></td><td><button>削除</button></td></tr>`
142                    );
143                });
144            }
145
146            const selectButtons = document.querySelectorAll("selectButton");
147            // 選択した情報を保存するための配列
148            let selectedInfo = [];
149            // 選択ボタンがクリックされた時の処理
150            function handleSelectButtonClick(event) {
151                // 押されたボタンがどの行のものなのか特定
152                const selectedRow = event.target.parentElement.parentElement;
153                // 選択した情報を取得
154                const selectedData = selectedRow.firstElementChild.textContent;
155                // 選択した情報を配列に追加
156                selectedInfo.push(selectedData);
157                // テーブルから情報を削除
158                selectedRow.remove();
159                // 選択した情報一覧を更新
160                updateSelectedInfo();
161            }
162            //各選択ボタンにクリックイベントを追加
163            selectButtons.forEach((button) => {
164                button.addEventListener("click", handleSelectButtonClick);
165            });
166        </script>
167    </body>
168</html>
169
170

js
1const path = require("path");
2const express = require("express");
3const ejs = require("ejs");
4const app = express();
5const bodyParser = require("body-parser");
6const port = 3000;
7
8app.use(bodyParser.urlencoded({ extended: true }));
9app.use(express.static('public'));
10app.set("view engine", "ejs");
11
12const mysql = require("mysql2");
13
14const con = mysql.createConnection({
15  host: "localhost",
16  user: "root",
17  password: "rootroot",
18  database: "express_db",
19});
20
21// mysqlからデータを持ってくる
22app.get("/", (req, res) => {
23  const sql = "select * from personas";
24  con.query(sql, function (err, result, fields) {
25    if (err) throw err;
26    res.render("index", {
27      personas: result
28    });
29  });
30});
31
32//入力フォームに飛ぶための記述
33app.get("/create1", (req, res) => {
34  res.sendFile(path.join(__dirname, "/views/html/form.html"));
35});
36
37//選択した情報一覧に飛ぶための記述
38app.get("/create2", (req, res) => {
39  res.sendFile(path.join(__dirname, "/views/html/selection.html"));
40});
41
42//更新フォームに飛ぶための記述
43app.get("/edit/:id", (req, res) => {
44  const sql = "SELECT * FROM personas WHERE id = ?";
45  con.query(sql, [req.params.id], function (err, result, fields) {
46    if (err) throw err;
47    res.render("edit", { user: result });
48  });
49});
50
51//削除機能の記述
52app.get("/delete/:id", (req, res) => {
53  const sql = "DELETE FROM personas WHERE id = ?";
54  con.query(sql, [req.params.id], function (err, result, fields) {
55    if (err) throw err;
56    res.redirect("/");
57  });
58});
59
60//選択ボタン
61app.get("/selection/:id", (req, res) => {
62  const sql = "SELECT FROM personas WHERE id = ?";
63});
64
65app.listen(port, () => console.log(`Example app listening on port ${port}!`));
66

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title>顧客情報管理システム</title>
6    </head>
7    <body>
8        <h1>選択した情報一覧</h1>
9    </body>
10    </html>

やり方自体が間違っているかもしれませんが、解決のためアドバイスいただけると幸いです。よろしくお願いいたします。

miffy-n

2023/08/04 08:33

```mysql -- MySQL dump 10.13 Distrib 8.0.32, for Win64 (x86_64) -- -- Host: localhost Database: mydatabase -- ------------------------------------------------------ -- Server version 5.7.41-log /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!50503 SET NAMES utf8 */; /*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */; /*!40103 SET TIME_ZONE='+00:00' */; /*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */; -- -- Table structure for table `personas` -- DROP TABLE IF EXISTS `personas`; /*!40101 SET @saved_cs_client = @@character_set_client */; /*!50503 SET character_set_client = utf8mb4 */; CREATE TABLE `personas` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, `kana_name` varchar(50) NOT NULL, `gender` enum('男性','女性') NOT NULL, `email` varchar(100) NOT NULL, `phone` varchar(20) NOT NULL, `address` varchar(200) NOT NULL, `workplace` enum('北海道','青森','岩手','宮城','秋田','山形','福島','茨城','栃木','群馬','埼玉','千葉','東京','神奈川','新潟','富山','石川','福井','山梨','長野','岐阜','静岡','愛知','三重','滋賀','京都','大阪','兵庫','奈良','和歌山','鳥取','島根','岡山','広島','山口','徳島','香川','愛媛','高知','福岡','佐賀','長崎','熊本','大分','宮崎','鹿児島','沖縄') NOT NULL, `household` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=42 DEFAULT CHARSET=utf8mb4; /*!40101 SET character_set_client = @saved_cs_client */; -- -- Dumping data for table `personas` -- LOCK TABLES `personas` WRITE; /*!40000 ALTER TABLE `personas` DISABLE KEYS */; INSERT INTO `personas` VALUES (11,'山田太郎','やまだたろう','男性','yamada.tarou@example.com','09012345678','東京都渋谷区','東京',4),(12,'鈴木由美子','すずきゆみこ','女性','suzuki.yumiko@example.com','08098765432','大阪府大阪市','大阪',2),(13,'田中健太','たなかけんた','男性','tanaka.kenta@example.com','09055555555','北海道札幌市','北海道',3),(14,'佐藤美穂','さとうみほ','女性','sato.miho@example.com','08011111111','愛知県名古屋市','愛知',5),(15,'伊藤蓮','いとうれん','男性','ito.ren@example.com','09099999999','京都府京都市','京都',2),(16,'渡辺彩香','わたなべあやか','女性','watanabe.ayaka@example.com','08022222222','福岡県福岡市','福岡',1),(17,'中村健斗','なかむらけんと','男性','nakamura.kento@example.com','09088888888','神奈川県横浜市','神奈川',2),(18,'高橋美咲','たかはしみさき','女性','takahashi.misaki@example.com','08033333333','兵庫県神戸市','兵庫',3),(19,'木村隆太','きむらりゅうた','男性','kimura.ryuta@example.com','09077777777','広島県広島市','広島',4),(20,'山本真由美','やまもとまゆみ','女性','yamamoto.mayumi@example.com','08044444444','宮城県仙台市','宮城',2),(21,'山田花子','やまだはなこ','女性','yamada.hanako@example.com','09011111111','東京都新宿区','東京',3),(22,'鈴木健司','すずきけんじ','男性','suzuki.kenji@example.com','08022222222','大阪府堺市','大阪',2),(23,'田中まり子','たなかまりこ','女性','tanaka.mariko@example.com','09033333333','京都府京都市','京都',1),(24,'佐藤雄太','さとうゆうた','男性','sato.yuuta@example.com','08044444444','愛知県名古屋市','愛知',4),(25,'伊藤愛','いとうあい','女性','ito.ai@example.com','09055555555','北海道札幌市','北海道',2),(26,'渡辺聡','わたなべさとし','男性','watanabe.satoshi@example.com','08066666666','福岡県福岡市','福岡',3),(27,'中村美優','なかむらみゆう','女性','nakamura.miyuu@example.com','09077777777','神奈川県横浜市','神奈川',2),(28,'高橋健太郎','たかはしけんたろう','男性','takahashi.kentarou@example.com','08088888888','兵庫県神戸市','兵庫',5),(29,'木村莉子','きむらりこ','女性','kimura.riko@example.com','09099999999','広島県広島市','広島',2),(30,'山本健斗','やまもとけんと','男性','yamamoto.kento@example.com','08012345678','宮城県仙台市','宮城',4),(31,'小林さくら','こばやしさくら','女性','kobayashi.sakura@example.com','09023456789','埼玉県さいたま市','埼玉',3),(32,'加藤太一','かとうたいち','男性','kato.taichi@example.com','08098765432','愛媛県松山市','愛媛',2),(33,'井上愛美','いのうえまなみ','女性','inoue.manami@example.com','09087654321','大阪府大阪市','大阪',1),(34,'佐々木蓮','ささきれん','男性','sasaki.ren@example.com','08056789012','東京都港区','東京',4),(35,'山下美由紀','やましたみゆき','女性','yamashita.miyuki@example.com','09065432109','神奈川県川崎市','神奈川',2),(36,'田辺隆','たなべたかし','男性','tanabe.takashi@example.com','08098761234','京都府京都市','京都',3),(37,'橋本美咲','はしもとみさき','女性','hashimoto.misaki@example.com','09087654321','広島県広島市','広島',2),(38,'西田雄大','にしだゆうだい','男性','nishida.yuudai@example.com','08065432109','宮城県仙台市','宮城',3),(39,'渡部あや','わたべあや','女性','watabe.aya@example.com','09098761234','埼玉県さいたま市','埼玉',2),(40,'岡田たかし','おかだたかし','男性','okada.takashi@example.com','08056789012','愛知県名古屋市','愛知',5),(41,'松本まり','まつもとまり','女性','matsumoto.mari@example.com','09065432109','北海道札幌市','北海道',2); /*!40000 ALTER TABLE `personas` ENABLE KEYS */; UNLOCK TABLES; /*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */; /*!40101 SET SQL_MODE=@OLD_SQL_MODE */; /*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */; /*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; /*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */; -- Dump completed on 2023-06-14 16:31:00 ```