PcReDiveClanRecordFrontend/js/index.js

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.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", {
    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 = "<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);
    });

function getDate() {
    var dateSplit = selectedDate.value.split("-");
    console.log(dateSplit);
    // 取得刀表
    axios.get("http://127.0.0.1:10001/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 = "<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);
        });
}