first commit
This commit is contained in:
Raymond Yang
+207
@@ -0,0 +1,207 @@
|
||||
<!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>
|
||||
|
||||
<style>
|
||||
table {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color:#000000;
|
||||
} /* 未訪問超連結 */
|
||||
|
||||
a:visited {
|
||||
color:#000000;
|
||||
} /* 已訪問超連結 */
|
||||
|
||||
a:hover {
|
||||
color: #1aff00;
|
||||
} /* 滑鼠移動到超連結上 */
|
||||
|
||||
a:active {
|
||||
color: #396035;
|
||||
} /* 滑鼠點選時 */
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-family: 'Arial Black',system-ui
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-family: 'Arial Black',system-ui
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: bold;
|
||||
font-family: 'Arial Black',system-ui
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
font-family: 'Arial Black',system-ui
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
font-family: 'Arial',system-ui
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-weight: bold;
|
||||
font-family: 'Arial',system-ui
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 30%;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
font-family: 'Arial',system-ui
|
||||
}
|
||||
|
||||
.form_td {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.label_title {
|
||||
font-weight: bold;
|
||||
font-family: 'Arial Black',system-ui
|
||||
}
|
||||
|
||||
.label_content {
|
||||
font-weight: normal;
|
||||
font-family: 'Arial',system-ui
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body id="body">
|
||||
<p>
|
||||
<a href="new.html">我要填表</a>
|
||||
</p>
|
||||
|
||||
<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");
|
||||
|
||||
table.appendChild(thead);
|
||||
table.appendChild(tbody);
|
||||
|
||||
// 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>殘刀";
|
||||
|
||||
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 = "";
|
||||
}
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user