chilinglee.github.io/reserviorTable.html at main · chilinglee/chilinglee.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>

<body>
    <div class="jumbotron bg-secondary">
        <h1 class="text-light text-center">Reservior Table</h1>
    </div>
    <div id="container"></div>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
        crossorigin="anonymous"></script>

    <script>
        //資料集
        let Titles = ["Name", "Capacity ", "Percent", "Days"];
        let Reserviors = [
            { Name: "新山水庫", Capacity: 896.58, Percent: 89.4, Days: "----" },
            { Name: "翡翠水庫", Capacity: 26455.31, Percent: 78.8, Days: "60天以上" },
            { Name: "石門水庫", Capacity: 6795.68, Percent: 34.4, Days: "60天以上" },
            { Name: "永和山水庫", Capacity: 242.59, Percent: 8.1, Days: "30天-60天" },
            { Name: "寶山水庫", Capacity: 94.18, Percent: 18.7, Days: "60天以上" }
        ]

        //table
        let table = document.createElement("table");
        table.setAttribute("class", "table table-info table-striped text-center");
        let thead = document.createElement("thead");
        let tbody = document.createElement("tbody");
        let container = document.getElementById("container");

        //window.onload
        window.onload = function () {
            createTitle(Titles);
            createRows(Reserviors);
            container.appendChild(table);
        }

        //製作title的function
        function createTitle(titleArray) {
            AddRows(thead, titleArray);
        }

        //製作rows的function
        function createRows(dataArray) {
            dataArray.forEach(function (reservior) {
                let values = Object.values(reservior);
                AddRows(tbody, values);
            });
        }

        //AddRows
        function AddRows(target, rowdata) {
            let tr = document.createElement("tr");
            rowdata.forEach(function (item) {
                let td = document.createElement("td");
                td.innerText = item;
                tr.appendChild(td);
            })
            tbody.appendChild(tr);
            table.appendChild(target);
        }
    </script>
</body>

</html>