ray650128/PcReDiveRankTableFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

加入新增角色

Browse Source
This commit is contained in:
Raymond Yang
2023-07-01 23:53:58 +08:00
parent 109db1356b
commit 74dbca2535
2 changed files with 181 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
characters.html
+56 -17
View File
@@ -1,5 +1,6 @@
<!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">
@@ -7,28 +8,66 @@
<title>所有角色</title>
</head>
<body>
<div id="result"></div>
<body id="body">
<div class="page-title">角色清單</div>
<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 = "角色名稱";
let heading_3 = document.createElement("th");
heading_3.innerHTML = "角色站位";
row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);
// 发送登录请求
axios.get('http://127.0.0.1:8080/api/v1/characters')
.then(function(response) {
const data = response.data;
const resultElement = document.getElementById('result');
var htmlText = "";
for (let i = 0; i < data.length; i++) {
htmlText += "<tr><td>"+ data[i].name +"</td><td><img src=\"http://127.0.0.1:8080" + data[i].imgSrc + "\" width=\"64\" height=\"64\"></td></tr>";
}
resultElement.innerHTML = "<table>" + htmlText + "</table>";
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: ", data);
// Creating and adding data to second row of the table
for (let i = 0; i < data.length; i++) {
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");
const item = data[i];
row_2_data_1.innerHTML = "<img src=\"http://127.0.0.1:8080" + item.imgSrc + "\" width=\"64\" height=\"64\">";
row_2_data_2.innerHTML = item.name;
row_2_data_3.innerHTML = item.standIndex;
row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);
}
})
.catch(function (error) {
alert('資料取得失敗');
console.error('登入失敗:', error);
});
</script>
</body>
</html>