advanced-programming/CW7/documentObjectModel.html at master · eneskarali/advanced-programming · 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
83
84
85
86
87
88
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document Object Model </title>

    <style>
            table {
                width: 400px;
            }
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
            th, td {
                padding: 10px;
                text-align: left;
            }

            table#myTable {
                background-color: #cecdcd;
            }
            table#myTable tbody tr:nth-child(even){
                background-color: #eeeeee;
            }
            table#myTable tbody tr:nth-child(odd){
                background-color: #ffffff;
            }
            </style>

    <script>
        function readDataFromUrl() {
            let url = "https://maeyler.github.io/JS/data/Students.txt";
            fetch(url)
                .then(res => res.text())
                .then(res => addTextDataToTable(res))
        }

        function addTextDataToTable(txt) {
            var lines = txt.split("\n");
            for (var line of lines) {
                var words = line.split("\t");
                let student = { "id": words[0], "name": words[1], "gpa": words[2] };
                studentsData.push(student);
            }
            addDataToTable();
        }
        function addDataToTable() {
            var tbl = document.getElementById("myTable");

            var head = tbl.insertRow(0);
            var headIndex = 0;
            var rowIndex = 1;
            var keys = [];
            for(var key of Object.keys(studentsData[0])){
                var c = head.insertCell(headIndex);
                c.innerHTML ="<b>" +key.toUpperCase()+"</b>";
                keys.push(key);
                headIndex++;
            }

            for(var student of studentsData){
                var row = tbl.insertRow(rowIndex);
                for(let i=0;i<headIndex;i++ ){
                    var c1 = row.insertCell(i);
                    c1.innerHTML = student[keys[i]];
                }
                rowIndex++;
            }


        }
    </script>
</head>

<body>
    <h1>Student Data</h1>
    <table id="myTable" > </table>
    <script>
        readDataFromUrl();
        var studentsData = [];
    </script>

</body>

</html>