markdown JS.JSON.Study at edX - 显示远程数据

Posted 2021-05-05

"use strict";
// Retrieve data from remote server.
function fGetData() {
    fetch("https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json")
        .then(function(response) {
            return response.json();
        })
        .then(function(jsObj) {
            fDynTable(jsObj);
        })
        .catch(function(error) {
            console.log(error.message);
        });
}

// Build table with the data from remote server.
function fDynTable(tableData) {
    var table1 = document.createElement("table");
    var tcaption1 = table1.createCaption();
    var tbody1 = table1.createTBody();
    var tcaption1Text = document.createTextNode("Dynamic Table with Some Data From Some URL");
    //var howManyRows = tableData.data.lenght;
    tcaption1.appendChild(tcaption1Text);
    tableData.data.forEach(function(somePerson) {
        var tRow1 = tbody1.insertRow();
        somePerson.forEach(function(cellData) {
            var tCell = tRow1.insertCell();
            var tCellText = document.createTextNode(cellData);
            tCell.appendChild(tCellText);
        });
    });
    document.body.appendChild(table1);
    fTableStyle();
}

// Apply some style to the table.
function fTableStyle() {
    var table1 = document.querySelector("table");
    var rowsOdd = table1.querySelectorAll("tr:nth-child(odd)");
    var td1 = table1.querySelectorAll("td");
    td1.forEach(function(tdCur) {
        tdCur.style.padding = "10px";
    });
    rowsOdd.forEach(function(rowCur) {
        rowCur.style.backgroundColor = "lime";
    });
}
fGetData();

JS.JSON.Study at edX - Displaying remote data
---------------------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/mzbmrB) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/mzbmrB/license).