From fbc0760bd3c94bb6795819516fe7b1d28ca929af Mon Sep 17 00:00:00 2001
From: Raymond Yang <ray650128@gmail.com>
Date: Tue, 27 Jun 2023 00:10:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=A6=E4=BD=9C=E6=96=B0=E5=A2=9E=E3=80=81?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 edit.html  | 230 ++++++++++++++++++++++
 index.html | 262 ++++++++++++-------------
 new.html   | 545 +++++++++++++++++++++++++++--------------------------
 3 files changed, 638 insertions(+), 399 deletions(-)
 create mode 100644 edit.html
diff --git a/edit.html b/edit.html
new file mode 100644
index 0000000..c583bd5
--- /dev/null
+++ b/edit.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>接收参数示例</title>
+    <script>
+
+    </script>
+</head>
+
+<body>
+    <form id="record-form">
+        <table>
+            <tr>
+                <td>第1刀正刀</td>
+                <td>
+                    <input type="text" id="knife1_boss" placeholder="x周-y王" />
+                </td>
+                <td>第1刀正刀傷害</td>
+                <td>
+                    <input type="text" id="knife1_damage" placeholder="ex: 12000000" />
+                </td>
+            </tr>
+            <tr>
+                <td>第1刀殘刀</td>
+                <td>
+                    <input type="text" id="knife1c_boss" placeholder="x周-y王" />
+                </td>
+                <td>第1刀殘刀傷害</td>
+                <td>
+                    <input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
+                </td>
+            </tr>
+        </table>
+        <hr />
+        <table>
+            <tr>
+                <td>第2刀正刀</td>
+                <td>
+                    <input type="text" id="knife2_boss" placeholder="x周-y王" />
+                </td>
+                <td>第2刀正刀傷害</td>
+                <td>
+                    <input type="text" id="knife2_damage" placeholder="ex: 12000000" />
+                </td>
+            </tr>
+            <tr>
+                <td>第2刀殘刀</td>
+                <td>
+                    <input type="text" id="knife2c_boss" placeholder="x周-y王" />
+                </td>
+                <td>第2刀殘刀傷害</td>
+                <td>
+                    <input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
+                </td>
+            </tr>
+        </table>
+        <hr />
+        <table>
+            <tr>
+                <td>第3刀正刀</td>
+                <td>
+                    <input type="text" id="knife3_boss" placeholder="x周-y王" />
+                </td>
+                <td>第3刀正刀傷害</td>
+                <td>
+                    <input type="text" id="knife3_damage" placeholder="ex: 12000000" />
+                </td>
+            </tr>
+            <tr>
+                <td>第3刀殘刀</td>
+                <td>
+                    <input type="text" id="knife3c_boss" placeholder="x周-y王" />
+                </td>
+                <td>第3刀殘刀傷害</td>
+                <td>
+                    <input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
+                </td>
+            </tr>
+        </table>
+        <hr />
+        <p><button type="submit">送出</button></p>
+    </form>
+
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
+    <script language="javascript" type="text/javascript">
+
+        var paramValue = "";
+        var memberId = "";
+
+        var knife1_boss = document.getElementById("knife1_boss");
+        var knife1_damage = document.getElementById("knife1_damage");
+        var knife1c_boss = document.getElementById("knife1c_boss");
+        var knife1c_damage = document.getElementById("knife1c_damage");
+
+        var knife2_boss = document.getElementById("knife2_boss");
+        var knife2_damage = document.getElementById("knife2_damage");
+        var knife2c_boss = document.getElementById("knife2c_boss");
+        var knife2c_damage = document.getElementById("knife2c_damage");
+
+        var knife3_boss = document.getElementById("knife3_boss");
+        var knife3_damage = document.getElementById("knife3_damage");
+        var knife3c_boss = document.getElementById("knife3c_boss");
+        var knife3c_damage = document.getElementById("knife3c_damage");
+
+        // 在页面加载完成后执行获取参数的操作
+        window.onload = function () {
+            // 获取名为 "param" 的参数值
+            paramValue = getParameterByName('id');
+            console.log(paramValue);
+
+            axios.get("http://127.0.0.1:10001/api/record/" + paramValue)
+                .then(function (response) {
+                    // 在這裡處理回傳的資料
+                    var options = response.data;
+                    console.log(options);
+                    memberId = options.member._id;
+                    knife1_boss.value = options.record1.boss;
+                    knife1_damage.value = options.record1.damage ?? "";
+                    knife1c_boss.value = options.record1c.boss;
+                    knife1c_damage.value = options.record1.damage ?? "";
+
+                    knife2_boss.value = options.record2.boss;
+                    knife2_damage.value = options.record2.damage ?? "";
+                    knife2c_boss.value = options.record2c.boss;
+                    knife2c_damage.value = options.record2c.damage ?? "";
+
+                    knife3_boss.value = options.record3.boss;
+                    knife3_damage.value = options.record3.damage ?? "";
+                    knife3c_boss.value = options.record3c.boss;
+                    knife3c_damage.value = options.record3c.damage ?? "";
+                })
+                .catch(function (error) {
+                    // 處理錯誤
+                    console.error(error);
+                });
+        };
+
+        document.getElementById("record-form").addEventListener("submit", function (event) {
+            event.preventDefault(); // 阻止表单的默认提交行为
+
+            // 执行登录请求
+            fillRecord(
+                paramValue,
+                memberId,
+                knife1_boss.value,
+                knife1_damage.value,
+                knife1c_boss.value,
+                knife1c_damage.value,
+                knife2_boss.value,
+                knife2_damage.value,
+                knife2c_boss.value,
+                knife2c_damage.value,
+                knife3_boss.value,
+                knife3_damage.value,
+                knife3c_boss.value,
+                knife3c_damage.value
+            );
+        });
+
+        function getParameterByName(name) {
+            // 获取 URL 中的参数部分
+            var url = window.location.href;
+            // 对 URL 进行解析
+            var parsedUrl = new URL(url);
+            // 从解析后的 URL 中获取参数值
+            return parsedUrl.searchParams.get(name);
+        }
+
+        function fillRecord(
+            recordId,
+            memberId,
+            knife1_boss,
+            knife1_damage,
+            knife1c_boss,
+            knife1c_damage,
+            knife2_boss,
+            knife2_damage,
+            knife2c_boss,
+            knife2c_damage,
+            knife3_boss,
+            knife3_damage,
+            knife3c_boss,
+            knife3c_damage
+        ) {
+            // 发送登录请求
+            axios.put("http://127.0.0.1:10001/api/record/" + recordId, {
+                memberId: memberId,
+                record1: {
+                    boss: knife1_boss,
+                    damage: parseInt(knife1_damage),
+                },
+                record1c: {
+                    boss: knife1c_boss,
+                    damage: parseInt(knife1c_damage),
+                },
+                record2: {
+                    boss: knife2_boss,
+                    damage: parseInt(knife2_damage),
+                },
+                record2c: {
+                    boss: knife2c_boss,
+                    damage: parseInt(knife2c_damage),
+                },
+                record3: {
+                    boss: knife3_boss,
+                    damage: parseInt(knife3_damage),
+                },
+                record3c: {
+                    boss: knife3c_boss,
+                    damage: parseInt(knife3c_damage),
+                }
+            })
+                .then(function (response) {
+                    window.location.href = "./index.html";
+                })
+                .catch(function (error) {
+                    const message = error.response.data.message;
+                    alert("更新失敗");
+                    //console.error('登入失敗:', error);
+                });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 4c03748..394525f 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,7 @@
 <!DOCTYPE html>
-<html
-  lang="zh-TW"
-  xmlns="http://www.w3.org/1999/html"
-  xmlns="http://www.w3.org/1999/html"
->
-  <head>
+<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+
+<head>
     <!-- Required meta tags -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -12,71 +9,80 @@
     <title>刀表</title>
 
     <style>
-      table {
-        border-style: solid;
-        border-width: 2px;
-        border-collapse: collapse;
-        width: 100%;
-      }
+        table {
+            border-style: solid;
+            border-width: 2px;
+            border-collapse: collapse;
+            width: 100%;
+        }
 
-      th, td {
-        padding: 10px 20px;
-        border: 1px solid #000;
-      }
+        th,
+        td {
+            padding: 10px 20px;
+            border: 1px solid #000;
+        }
 
-      a:link {
-            color:#000000;
-        } /* 未訪問超連結 */
+        a:link {
+            color: #000000;
+        }
+
+        /* 未訪問超連結 */
 
         a:visited {
-            color:#000000;
-        } /* 已訪問超連結 */
+            color: #000000;
+        }
+
+        /* 已訪問超連結 */
 
         a:hover {
             color: #1aff00;
-        } /* 滑鼠移動到超連結上 */
+        }
+
+        /* 滑鼠移動到超連結上 */
 
         a:active {
             color: #396035;
-        } /* 滑鼠點選時 */
+        }
+
+        /* 滑鼠點選時 */
 
         h1 {
             font-weight: bold;
-            font-family: 'Arial Black',system-ui
+            font-family: 'Arial Black', system-ui
         }
 
         h2 {
             font-weight: bold;
-            font-family: 'Arial Black',system-ui
+            font-family: 'Arial Black', system-ui
         }
 
         h3 {
             font-weight: bold;
-            font-family: 'Arial Black',system-ui
+            font-family: 'Arial Black', system-ui
         }
 
         h4 {
             font-weight: bold;
-            font-family: 'Arial Black',system-ui
+            font-family: 'Arial Black', system-ui
         }
 
         p {
             font-weight: bold;
-            font-family: 'Arial',system-ui
+            font-family: 'Arial', system-ui
         }
 
         .center {
             margin-left: auto;
             margin-right: auto;
             font-weight: bold;
-            font-family: 'Arial',system-ui
+            font-family: 'Arial', system-ui
         }
 
         .button {
             width: 30%;
             height: 30px;
             font-weight: bold;
-            font-family: 'Arial',system-ui
+            font-family: 'Arial', system-ui
         }
 
         .form_td {
@@ -86,122 +92,118 @@
 
         .label_title {
             font-weight: bold;
-            font-family: 'Arial Black',system-ui
+            font-family: 'Arial Black', system-ui
         }
 
         .label_content {
             font-weight: normal;
-            font-family: 'Arial',system-ui
+            font-family: 'Arial', system-ui
         }
     </style>
-  </head>
-  <body id="body">
+</head>
+
+<body id="body">
+    <h1>填表系統</h1>
+    <hr>
     <p>
         <a href="new.html">我要填表</a>
     </p>
+    <hr>
 
     <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
     <script language="javascript" type="text/javascript">
-      let table = document.createElement("table");
-      let thead = document.createElement("thead");
-      let tbody = document.createElement("tbody");
+        let table = document.createElement("table");
+        let thead = document.createElement("thead");
+        let tbody = document.createElement("tbody");
 
-      table.appendChild(thead);
-      table.appendChild(tbody);
+        table.appendChild(thead);
+        table.appendChild(tbody);
 
-      // Adding the entire table to the body tag
-      document.getElementById("body").appendChild(table);
+        // Adding the entire table to the body tag
+        document.getElementById("body").appendChild(table);
 
-      // Creating and adding data to first row of the table
-      let row_1 = document.createElement("tr");
-      let heading_1 = document.createElement("th");
-      heading_1.innerHTML = "成員名稱";
-      let heading_2 = document.createElement("th");
-      heading_2.innerHTML = "1<br>正刀";
-      let heading_3 = document.createElement("th");
-      heading_3.innerHTML = "1<br>殘刀";
-      let heading_4 = document.createElement("th");
-      heading_4.innerHTML = "2<br>正刀";
-      let heading_5 = document.createElement("th");
-      heading_5.innerHTML = "2<br>殘刀";
-      let heading_6 = document.createElement("th");
-      heading_6.innerHTML = "3<br>正刀";
-      let heading_7 = document.createElement("th");
-      heading_7.innerHTML = "3<br>殘刀";
+        // Creating and adding data to first row of the table
+        let row_1 = document.createElement("tr");
+        let heading_1 = document.createElement("th");
+        heading_1.innerHTML = "成員名稱";
+        let heading_2 = document.createElement("th");
+        heading_2.innerHTML = "1<br>正刀";
+        let heading_3 = document.createElement("th");
+        heading_3.innerHTML = "1<br>殘刀";
+        let heading_4 = document.createElement("th");
+        heading_4.innerHTML = "2<br>正刀";
+        let heading_5 = document.createElement("th");
+        heading_5.innerHTML = "2<br>殘刀";
+        let heading_6 = document.createElement("th");
+        heading_6.innerHTML = "3<br>正刀";
+        let heading_7 = document.createElement("th");
+        heading_7.innerHTML = "3<br>殘刀";
 
-      row_1.appendChild(heading_1);
-      row_1.appendChild(heading_2);
-      row_1.appendChild(heading_3);
-      row_1.appendChild(heading_4);
-      row_1.appendChild(heading_5);
-      row_1.appendChild(heading_6);
-      row_1.appendChild(heading_7);
-      thead.appendChild(row_1);
-      // 取得刀表
-      axios
-        .get("http://127.0.0.1:10001/api/record")
-        .then(function (response) {
-          const data = response.data;
-          for (let i = 0; i < data.length; i++) {
-            // Creating and adding data to second row of the table
-            let row_2 = document.createElement("tr");
-            let row_2_data_1 = document.createElement("td");
-            row_2_data_1.innerHTML = data[i].member.playerName;
-            let row_2_data_2 = document.createElement("td");
-            if ("record1" in data[i].record) {
-                row_2_data_2.innerHTML = data[i].record.record1.boss;
-            } else {
-                row_2_data_2.innerHTML = "";
+        row_1.appendChild(heading_1);
+        row_1.appendChild(heading_2);
+        row_1.appendChild(heading_3);
+        row_1.appendChild(heading_4);
+        row_1.appendChild(heading_5);
+        row_1.appendChild(heading_6);
+        row_1.appendChild(heading_7);
+        thead.appendChild(row_1);
+        // 取得刀表
+        axios.get("http://127.0.0.1:10001/api/record", {
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
             }
-            let row_2_data_3 = document.createElement("td");
-            if ("record1c" in data[i].record) {
-                row_2_data_3.innerHTML = data[i].record.record1c.boss;
-            } else {
-                row_2_data_3.innerHTML = "";
-            }
-
-            let row_2_data_4 = document.createElement("td");
-            if ("record1" in data[i].record) {
-                row_2_data_4.innerHTML = data[i].record.record2.boss;
-            } else {
-                row_2_data_4.innerHTML = "";
-            }
-            let row_2_data_5 = document.createElement("td");
-            if ("record1c" in data[i].record) {
-                row_2_data_5.innerHTML = data[i].record.record2c.boss;
-            } else {
-                row_2_data_5.innerHTML = "";
-            }
-            
-            let row_2_data_6 = document.createElement("td");
-            if ("record1" in data[i].record) {
-                row_2_data_6.innerHTML = data[i].record.record3.boss;
-            } else {
-                row_2_data_6.innerHTML = "";
-            }
-            let row_2_data_7 = document.createElement("td");
-            if ("record1c" in data[i].record) {
-                row_2_data_7.innerHTML = data[i].record.record3c.boss;
-            } else {
-                row_2_data_7.innerHTML = "";
-            }
-
-            row_2.appendChild(row_2_data_1);
-            row_2.appendChild(row_2_data_2);
-            row_2.appendChild(row_2_data_3);
-            row_2.appendChild(row_2_data_4);
-            row_2.appendChild(row_2_data_5);
-            row_2.appendChild(row_2_data_6);
-            row_2.appendChild(row_2_data_7);
-            tbody.appendChild(row_2);
-          }
-          console.log("Data: ", data);
         })
-        .catch(function (error) {
-          //const message = error.response.data.message;
-          //alert("資料取得失敗");
-          console.error('資料取得失敗:', error);
-        });
+            .then(function (response) {
+                const data = response.data;
+                console.log(data);
+                for (let i = 0; i < data.length; i++) {
+                    // Creating and adding data to second row of the table
+                    let row_2 = document.createElement("tr");
+                    let row_2_data_1 = document.createElement("td");
+                    let row_2_data_2 = document.createElement("td");
+                    let row_2_data_3 = document.createElement("td");
+                    let row_2_data_4 = document.createElement("td");
+                    let row_2_data_5 = document.createElement("td");
+                    let row_2_data_6 = document.createElement("td");
+                    let row_2_data_7 = document.createElement("td");
+
+                    const item = data[i];
+
+                    if (item.record !== null) {
+                        row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>";
+                        row_2_data_2.innerHTML = item.record.record1.boss;
+                        row_2_data_3.innerHTML = item.record.record1c.boss;
+                        row_2_data_4.innerHTML = item.record.record2.boss;
+                        row_2_data_5.innerHTML = item.record.record2c.boss;
+                        row_2_data_6.innerHTML = item.record.record3.boss;
+                        row_2_data_7.innerHTML = item.record.record3c.boss;
+                    } else {
+                        row_2_data_1.innerHTML = item.member.playerName;
+                        row_2_data_2.innerHTML = "";
+                        row_2_data_3.innerHTML = "";
+                        row_2_data_4.innerHTML = "";
+                        row_2_data_5.innerHTML = "";
+                        row_2_data_6.innerHTML = "";
+                        row_2_data_7.innerHTML = "";
+                    }
+
+                    row_2.appendChild(row_2_data_1);
+                    row_2.appendChild(row_2_data_2);
+                    row_2.appendChild(row_2_data_3);
+                    row_2.appendChild(row_2_data_4);
+                    row_2.appendChild(row_2_data_5);
+                    row_2.appendChild(row_2_data_6);
+                    row_2.appendChild(row_2_data_7);
+                    tbody.appendChild(row_2);
+                }
+            })
+            .catch(function (error) {
+                //const message = error.response.data.message;
+                //alert("資料取得失敗");
+                console.error('資料取得失敗:', error);
+            });
     </script>
-  </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/new.html b/new.html
index 128e398..e966f87 100644
--- a/new.html
+++ b/new.html
@@ -1,301 +1,308 @@
 <!DOCTYPE html>
-<html
-  lang="zh-TW"
-  xmlns="http://www.w3.org/1999/html"
-  xmlns="http://www.w3.org/1999/html"
->
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 
-    <title>填表</title>
+<head>
+  <!-- Required meta tags -->
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <style>
-      table {
-        border-style: solid;
-        border-width: 2px;
-        border-collapse: collapse;
-        width: 100%;
-      }
+  <title>填表</title>
 
-      th,
-      td {
-        padding: 10px 20px;
-        border: 1px solid #000;
-      }
+  <style>
+    table {
+      border-style: solid;
+      border-width: 2px;
+      border-collapse: collapse;
+      width: 100%;
+    }
 
-      a:link {
-        color: #000000;
-      } /* 未訪問超連結 */
+    th,
+    td {
+      padding: 10px 20px;
+      border: 1px solid #000;
+    }
 
-      a:visited {
-        color: #000000;
-      } /* 已訪問超連結 */
+    a:link {
+      color: #000000;
+    }
 
-      a:hover {
-        color: #1aff00;
-      } /* 滑鼠移動到超連結上 */
+    /* 未訪問超連結 */
 
-      a:active {
-        color: #396035;
-      } /* 滑鼠點選時 */
+    a:visited {
+      color: #000000;
+    }
 
-      h1 {
-        font-weight: bold;
-        font-family: "Arial Black", system-ui;
-      }
+    /* 已訪問超連結 */
 
-      h2 {
-        font-weight: bold;
-        font-family: "Arial Black", system-ui;
-      }
+    a:hover {
+      color: #1aff00;
+    }
 
-      h3 {
-        font-weight: bold;
-        font-family: "Arial Black", system-ui;
-      }
+    /* 滑鼠移動到超連結上 */
 
-      h4 {
-        font-weight: bold;
-        font-family: "Arial Black", system-ui;
-      }
+    a:active {
+      color: #396035;
+    }
 
-      p {
-        font-weight: bold;
-        font-family: "Arial", system-ui;
-      }
+    /* 滑鼠點選時 */
 
-      .center {
-        margin-left: auto;
-        margin-right: auto;
-        font-weight: bold;
-        font-family: "Arial", system-ui;
-      }
+    h1 {
+      font-weight: bold;
+      font-family: "Arial Black", system-ui;
+    }
 
-      .button {
-        width: 30%;
-        height: 30px;
-        font-weight: bold;
-        font-family: "Arial", system-ui;
-      }
+    h2 {
+      font-weight: bold;
+      font-family: "Arial Black", system-ui;
+    }
 
-      .form_td {
-        padding-top: 5px;
-        padding-bottom: 5px;
-      }
+    h3 {
+      font-weight: bold;
+      font-family: "Arial Black", system-ui;
+    }
 
-      .label_title {
-        font-weight: bold;
-        font-family: "Arial Black", system-ui;
-      }
+    h4 {
+      font-weight: bold;
+      font-family: "Arial Black", system-ui;
+    }
 
-      .label_content {
-        font-weight: normal;
-        font-family: "Arial", system-ui;
-      }
-    </style>
-  </head>
-  <body id="body">
-    <form id="record-form">
-      <table>
-        <tr>
-          <td>請選擇你的名字</td>
-          <td>
-            <select id="member_select"></select>
-          </td>
-        </tr>
-      </table>
-      <hr />
-      <table>
-        <tr>
-          <td>第1刀正刀</td>
-          <td>
-            <input type="text" id="knife1_boss" placeholder="x周-y王" />
-          </td>
-          <td>第1刀正刀傷害</td>
-          <td>
-            <input type="text" id="knife1_damage" placeholder="ex: 12000000" />
-          </td>
-        </tr>
-        <tr>
-          <td>第1刀殘刀</td>
-          <td>
-            <input type="text" id="knife1c_boss" placeholder="x周-y王" />
-          </td>
-          <td>第1刀殘刀傷害</td>
-          <td>
-            <input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
-          </td>
-        </tr>
-      </table>
-      <hr />
-      <table>
-        <tr>
-          <td>第2刀正刀</td>
-          <td>
-            <input type="text" id="knife2_boss" placeholder="x周-y王" />
-          </td>
-          <td>第2刀正刀傷害</td>
-          <td>
-            <input type="text" id="knife2_damage" placeholder="ex: 12000000" />
-          </td>
-        </tr>
-        <tr>
-          <td>第2刀殘刀</td>
-          <td>
-            <input type="text" id="knife2c_boss" placeholder="x周-y王" />
-          </td>
-          <td>第2刀殘刀傷害</td>
-          <td>
-            <input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
-          </td>
-        </tr>
-      </table>
-      <hr />
-      <table>
-        <tr>
-          <td>第3刀正刀</td>
-          <td>
-            <input type="text" id="knife3_boss" placeholder="x周-y王" />
-          </td>
-          <td>第3刀正刀傷害</td>
-          <td>
-            <input type="text" id="knife3_damage" placeholder="ex: 12000000" />
-          </td>
-        </tr>
-        <tr>
-          <td>第3刀殘刀</td>
-          <td>
-            <input type="text" id="knife3c_boss" placeholder="x周-y王" />
-          </td>
-          <td>第3刀殘刀傷害</td>
-          <td>
-            <input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
-          </td>
-        </tr>
-      </table>
-      <hr />
-      <p><button type="submit">送出</button></p>
-    </form>
+    p {
+      font-weight: bold;
+      font-family: "Arial", system-ui;
+    }
 
-    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
-    <script language="javascript" type="text/javascript">
-      document
-        .getElementById("record-form")
-        .addEventListener("submit", function (event) {
-          event.preventDefault(); // 阻止表单的默认提交行为
+    .center {
+      margin-left: auto;
+      margin-right: auto;
+      font-weight: bold;
+      font-family: "Arial", system-ui;
+    }
 
-          // 假設你有一個下拉式選單的 HTML 元素
-          var selectElement = document.getElementById("member_select");
+    .button {
+      width: 30%;
+      height: 30px;
+      font-weight: bold;
+      font-family: "Arial", system-ui;
+    }
 
-          var knife1_boss = document.getElementById("knife1_boss").value;
-          var knife1_damage = document.getElementById("knife1_damage").value;
-          var knife1c_boss = document.getElementById("knife1c_boss").value;
-          var knife1c_damage = document.getElementById("knife1c_damage").value;
+    .form_td {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
 
-          var knife2_boss = document.getElementById("knife2_boss").value;
-          var knife2_damage = document.getElementById("knife2_damage").value;
-          var knife2c_boss = document.getElementById("knife2c_boss").value;
-          var knife2c_damage = document.getElementById("knife2c_damage").value;
+    .label_title {
+      font-weight: bold;
+      font-family: "Arial Black", system-ui;
+    }
 
-          var knife3_boss = document.getElementById("knife3_boss").value;
-          var knife3_damage = document.getElementById("knife3_damage").value;
-          var knife3c_boss = document.getElementById("knife3c_boss").value;
-          var knife3c_damage = document.getElementById("knife3c_damage").value;
+    .label_content {
+      font-weight: normal;
+      font-family: "Arial", system-ui;
+    }
+  </style>
+</head>
 
-          // 执行登录请求
-          fillRecord(
-            selectElement.value,
-            knife1_boss,
-            knife1_damage,
-            knife1c_boss,
-            knife1c_damage,
-            knife2_boss,
-            knife2_damage,
-            knife2c_boss,
-            knife2c_damage,
-            knife3_boss,
-            knife3_damage,
-            knife3c_boss,
-            knife3c_damage
-          );
+<body id="body">
+  <form id="record-form">
+    <table>
+      <tr>
+        <td>請選擇你的名字</td>
+        <td>
+          <select id="member_select"></select>
+        </td>
+      </tr>
+    </table>
+    <hr />
+    <table>
+      <tr>
+        <td>第1刀正刀</td>
+        <td>
+          <input type="text" id="knife1_boss" placeholder="x周-y王" />
+        </td>
+        <td>第1刀正刀傷害</td>
+        <td>
+          <input type="text" id="knife1_damage" placeholder="ex: 12000000" />
+        </td>
+      </tr>
+      <tr>
+        <td>第1刀殘刀</td>
+        <td>
+          <input type="text" id="knife1c_boss" placeholder="x周-y王" />
+        </td>
+        <td>第1刀殘刀傷害</td>
+        <td>
+          <input type="text" id="knife1c_damage" placeholder="ex: 12000000" />
+        </td>
+      </tr>
+    </table>
+    <hr />
+    <table>
+      <tr>
+        <td>第2刀正刀</td>
+        <td>
+          <input type="text" id="knife2_boss" placeholder="x周-y王" />
+        </td>
+        <td>第2刀正刀傷害</td>
+        <td>
+          <input type="text" id="knife2_damage" placeholder="ex: 12000000" />
+        </td>
+      </tr>
+      <tr>
+        <td>第2刀殘刀</td>
+        <td>
+          <input type="text" id="knife2c_boss" placeholder="x周-y王" />
+        </td>
+        <td>第2刀殘刀傷害</td>
+        <td>
+          <input type="text" id="knife2c_damage" placeholder="ex: 12000000" />
+        </td>
+      </tr>
+    </table>
+    <hr />
+    <table>
+      <tr>
+        <td>第3刀正刀</td>
+        <td>
+          <input type="text" id="knife3_boss" placeholder="x周-y王" />
+        </td>
+        <td>第3刀正刀傷害</td>
+        <td>
+          <input type="text" id="knife3_damage" placeholder="ex: 12000000" />
+        </td>
+      </tr>
+      <tr>
+        <td>第3刀殘刀</td>
+        <td>
+          <input type="text" id="knife3c_boss" placeholder="x周-y王" />
+        </td>
+        <td>第3刀殘刀傷害</td>
+        <td>
+          <input type="text" id="knife3c_damage" placeholder="ex: 12000000" />
+        </td>
+      </tr>
+    </table>
+    <hr />
+    <p><button type="submit">送出</button></p>
+  </form>
+
+  <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
+  <script language="javascript" type="text/javascript">
+    document
+      .getElementById("record-form")
+      .addEventListener("submit", function (event) {
+        event.preventDefault(); // 阻止表单的默认提交行为
+
+        // 假設你有一個下拉式選單的 HTML 元素
+        var selectElement = document.getElementById("member_select");
+
+        var knife1_boss = document.getElementById("knife1_boss").value;
+        var knife1_damage = document.getElementById("knife1_damage").value;
+        var knife1c_boss = document.getElementById("knife1c_boss").value;
+        var knife1c_damage = document.getElementById("knife1c_damage").value;
+
+        var knife2_boss = document.getElementById("knife2_boss").value;
+        var knife2_damage = document.getElementById("knife2_damage").value;
+        var knife2c_boss = document.getElementById("knife2c_boss").value;
+        var knife2c_damage = document.getElementById("knife2c_damage").value;
+
+        var knife3_boss = document.getElementById("knife3_boss").value;
+        var knife3_damage = document.getElementById("knife3_damage").value;
+        var knife3c_boss = document.getElementById("knife3c_boss").value;
+        var knife3c_damage = document.getElementById("knife3c_damage").value;
+
+        // 执行登录请求
+        fillRecord(
+          selectElement.value,
+          knife1_boss,
+          knife1_damage,
+          knife1c_boss,
+          knife1c_damage,
+          knife2_boss,
+          knife2_damage,
+          knife2c_boss,
+          knife2c_damage,
+          knife3_boss,
+          knife3_damage,
+          knife3c_boss,
+          knife3c_damage
+        );
+      });
+
+    axios
+      .get("http://127.0.0.1:10001/api/member/not_leave")
+      .then(function (response) {
+        // 在這裡處理回傳的資料
+        var options = response.data;
+
+        // 假設你有一個下拉式選單的 HTML 元素
+        var selectElement = document.getElementById("member_select");
+
+        // 將資料加入到下拉式選單中
+        options.forEach(function (option) {
+          var optionElement = document.createElement("option");
+          optionElement.value = option._id;
+          optionElement.textContent = option.playerName;
+          selectElement.appendChild(optionElement);
         });
+      })
+      .catch(function (error) {
+        // 處理錯誤
+        console.error(error);
+      });
 
+    function fillRecord(
+      memberId,
+      knife1_boss,
+      knife1_damage,
+      knife1c_boss,
+      knife1c_damage,
+      knife2_boss,
+      knife2_damage,
+      knife2c_boss,
+      knife2c_damage,
+      knife3_boss,
+      knife3_damage,
+      knife3c_boss,
+      knife3c_damage
+    ) {
+      // 发送登录请求
       axios
-        .get("http://127.0.0.1:10001/api/member")
+        .post("http://127.0.0.1:10001/api/record/" + memberId, {
+          record1: {
+            boss: knife1_boss,
+            damage: parseInt(knife1_damage),
+          },
+          record1c: {
+            boss: knife1c_boss,
+            damage: parseInt(knife1c_damage),
+          },
+          record2: {
+            boss: knife2_boss,
+            damage: parseInt(knife2_damage),
+          },
+          record2c: {
+            boss: knife2c_boss,
+            damage: parseInt(knife2c_damage),
+          },
+          record3: {
+            boss: knife3_boss,
+            damage: parseInt(knife3_damage),
+          },
+          record3c: {
+            boss: knife3c_boss,
+            damage: parseInt(knife3c_damage),
+          }
+        })
         .then(function (response) {
-          // 在這裡處理回傳的資料
-          var options = response.data;
-
-          // 假設你有一個下拉式選單的 HTML 元素
-          var selectElement = document.getElementById("member_select");
-
-          // 將資料加入到下拉式選單中
-          options.forEach(function (option) {
-            var optionElement = document.createElement("option");
-            optionElement.value = option._id;
-            optionElement.textContent = option.playerName;
-            selectElement.appendChild(optionElement);
-          });
+          window.location.href = "./index.html";
         })
         .catch(function (error) {
-          // 處理錯誤
-          console.error(error);
+          const message = error.response.data.message;
+          alert("新增失敗");
+          //console.error('登入失敗:', error);
         });
+    }
+  </script>
+</body>
 
-      function fillRecord(
-        memberId,
-        knife1_boss,
-        knife1_damage,
-        knife1c_boss,
-        knife1c_damage,
-        knife2_boss,
-        knife2_damage,
-        knife2c_boss,
-        knife2c_damage,
-        knife3_boss,
-        knife3_damage,
-        knife3c_boss,
-        knife3c_damage
-      ) {
-        // 发送登录请求
-        axios
-          .post("http://127.0.0.1:10001/api/record/" + memberId, {
-            record1: {
-              boss: knife1_boss,
-              damage: knife1_damage,
-            },
-            record1c: {
-              boss: knife1c_boss,
-              damage: knife1c_damage,
-            },
-            record2: {
-              boss: knife2_boss,
-              damage: knife2_damage,
-            },
-            record2c: {
-              boss: knife2c_boss,
-              damage: knife2c_damage,
-            },
-            record3: {
-              boss: knife3_boss,
-              damage: knife3_damage,
-            },
-            record3c: {
-              boss: knife3c_boss,
-              damage: knife3c_damage,
-            }
-          })
-          .then(function (response) {
-            window.location.href = "./index.html";
-          })
-          .catch(function (error) {
-            const message = error.response.data.message;
-            alert("登入失敗");
-            //console.error('登入失敗:', error);
-          });
-      }
-    </script>
-  </body>
-</html>
+</html>
\ No newline at end of file

第1刀正刀	+ +	第1刀正刀傷害	+ +
第1刀殘刀	+ +	第1刀殘刀傷害	+ +
第2刀正刀	+ +	第2刀正刀傷害	+ +
第2刀殘刀	+ +	第2刀殘刀傷害	+ +
第3刀正刀	+ +	第3刀正刀傷害	+ +
第3刀殘刀	+ +	第3刀殘刀傷害	+ +