var selectedDate = document.getElementById("queryDate"); var today = new Date(); var formattedDate = today.toISOString().split('T')[0]; selectedDate.value = formattedDate; 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.setAttribute('style', 'width: 40%;') let heading_2 = document.createElement("th"); heading_2.setAttribute('style', 'width: 10%;') let heading_3 = document.createElement("th"); heading_3.setAttribute('style', 'width: 10%;') let heading_4 = document.createElement("th"); heading_4.setAttribute('style', 'width: 10%;') let heading_5 = document.createElement("th"); heading_5.setAttribute('style', 'width: 10%;') let heading_6 = document.createElement("th"); heading_6.setAttribute('style', 'width: 10%;') let heading_7 = document.createElement("th"); heading_7.setAttribute('style', 'width: 10%;') let heading_1_text = document.createElement("h5"); heading_1_text.innerHTML = "成員名稱"; let heading_2_text = document.createElement("h5"); heading_2_text.innerHTML = "1
正刀"; let heading_3_text = document.createElement("h5"); heading_3_text.innerHTML = "2
正刀"; let heading_4_text = document.createElement("h5"); heading_4_text.innerHTML = "3
正刀"; let heading_5_text = document.createElement("h5"); heading_5_text.innerHTML = "1
殘刀"; let heading_6_text = document.createElement("h5"); heading_6_text.innerHTML = "2
殘刀"; let heading_7_text = document.createElement("h5"); heading_7_text.innerHTML = "3
殘刀"; heading_1.appendChild(heading_1_text); heading_2.appendChild(heading_2_text); heading_3.appendChild(heading_3_text); heading_4.appendChild(heading_4_text); heading_5.appendChild(heading_5_text); heading_6.appendChild(heading_6_text); heading_7.appendChild(heading_7_text); 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("https://pcredive.ray650128.com/backend/api/record", { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }) .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 = "
" + item.member.playerName + "
"; row_2_data_2.innerHTML = "
" + item.record.record1.boss + "
"; row_2_data_3.innerHTML = "
" + item.record.record2.boss + "
"; row_2_data_4.innerHTML = "
" + item.record.record3.boss + "
"; row_2_data_5.innerHTML = "
" + item.record.record1c.boss + "
"; row_2_data_6.innerHTML = "
" + item.record.record2c.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); }); function getDate() { var dateSplit = selectedDate.value.split("-"); console.log(dateSplit); // 取得刀表 axios.get("https://pcredive.ray650128.com/backend/api/record/" + dateSplit[0] + "/" + dateSplit[1] + "/" + dateSplit[2], { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }) .then(function (response) { const data = response.data; console.log(data); while (tbody.firstChild) { tbody.removeChild(tbody.firstChild); } 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 = "
" + item.member.playerName + "
"; row_2_data_2.innerHTML = "
" + item.record.record1.boss + "
"; row_2_data_3.innerHTML = "
" + item.record.record2.boss + "
"; row_2_data_4.innerHTML = "
" + item.record.record3.boss + "
"; row_2_data_5.innerHTML = "
" + item.record.record1c.boss + "
"; row_2_data_6.innerHTML = "
" + item.record.record2c.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); }); }