html JS.JSON.Dynamic table / EdX的W3Cx的JavaScript入门课程/

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html JS.JSON.Dynamic table / EdX的W3Cx的JavaScript入门课程/相关的知识，希望对你有一定的参考价值。

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html, body, #table {
    width: 100%;
}

button {
    margin: 20px;
}

@media only screen and (min-width: 768px) {
    #table {
        width: 90%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);       
    }
}

th {
    padding: 20px;
}

td {
    padding: 10px;
}

.buttonMain {
    padding: 10px;
}

table, tr, th, td {
    border: 1px solid #ffffff;
    border-collapse: collapse;
}

th {
    background-color: #11ffd7;
}

td {
    text-align: center;
}

#table tr:nth-child(even){
    background-color: #f2f2f2;
}

#table tr:hover {
    background-color: #ddd;
}

.buttonMain {
    background-color: #11c7ff;
    color: #ffffff;
}

.buttonMain:hover{
    background-color: #1180ff;
}

var users;
var usersDiv;
var table;

window.onload = init;


function init(){
    usersDiv = document.querySelector("#container");
    usersDiv.innerHTML = "";
    table = document.createElement("table");
    table.setAttribute("id", "table");
}

function search() {    
    var queryURL = "https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json";
    
    var xhr = new XMLHttpRequest();
    xhr.open('GET', queryURL, true);
    xhr.onload = function(e) {
      var jsonResponse = xhr.response;
      users = JSON.parse(jsonResponse);
      displayUsersAsATable();
    }
    xhr.onerror = function(err) {
      console.log("Error: " + err);
    }
    xhr.send();
} 
  
function displayUsersAsATable() {
    createTHead();
    createTableBady();
}


function createTHead(){
    var row = table.insertRow();
    row.insertCell().outerHTML = "<th>No</th>";
    row.insertCell().outerHTML = "<th>Name</th>";
    row.insertCell().outerHTML = "<th>Position</th>";
    row.insertCell().outerHTML = "<th>Location</th>";
    row.insertCell().outerHTML = "<th>Age</th>";
    row.insertCell().outerHTML = "<th>Date of employment</th>"; 
    row.insertCell().outerHTML = "<th>Salary</th>";
}

function createTableBady(){
    var i = 1;
    users.data.forEach(function(currentUser) {
        var row = table.insertRow();
        var numberCell = row.insertCell().innerHTML = i;
        i++;
        var nameCell = row.insertCell().innerHTML = currentUser[0];
        var jobPositionCell = row.insertCell().innerHTML = currentUser[1];
        var location = row.insertCell().innerHTML = currentUser[2];
        var age = row.insertCell().innerHTML = currentUser[3];
        var dateOfEmplayment = row.insertCell().innerHTML = currentUser[4];
        var salary = row.insertCell().innerHTML = currentUser[5];
     });
     usersDiv.appendChild(table);
}

JS.JSON.Dynamic table  /EdX's JavaScript Introduction Course by W3Cx/
---------------------------------------------------------------------


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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <link rel="stylesheet" type="text/css" href="layouts.css"/>
    <title>Dynamic table</title>
</head>
<body>
        <button class="buttonMain" onclick="search();">Get a table</button>
        <div id="container"></div>


    <script src="script.js"></script>
</body>
</html>

以上是关于html JS.JSON.Dynamic table / EdX的W3Cx的JavaScript入门课程/的主要内容，如果未能解决你的问题，请参考以下文章

html css 设置table内table的位置距离！！！！急急！！！！！！！！！！！！！！！！

HTML中table与td之间的距离怎么设置？

html5，table表格

html5中table标签下的行和列的合并问题

html JS.HTML.CSS.Tables.A典型的HTML table.v2

html怎么控制两个table间的间距