zoukankan      html  css  js  c++  java
  • 通过JavaScript创建表格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <div id = "mountains"></div>
    
    <script>
        let MOUNTAINS = [
            {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
            {name: "Everest", height: 8848, place: "Nepal"},
            {name: "Mount Fuji", height: 3776, place: "Japan"},
            {name: "Vaalserberg", height: 323, place: "Netherlands"},
            {name: "Denali", height: 6168, place: "United States"},
            {name: "Popocatepetl", height: 5465, place: "Mexico"},
            {name: "Mont Blanc", height: 4808, place: "Italy/France"}
        ];
    
        // 创建表格
        function buildTable(data) {
            let table = document.createElement("table");
            let tr = document.createElement("tr");
            // 通过 for in 循环遍历对象,得到对象的属性,为表头添加内容
            for (let i in data[6]) {
                let th = document.createElement("th");
                th.innerText = i;
                tr.appendChild(th);
            }
            table.appendChild(tr);
            // 通过 forEach 循环遍历对象数组,为表格添加行
            data.forEach((value, index) => {
                let tr = document.createElement("tr");
                // 通过 for in 循环遍历对象,得到对象的属性,给每行添加内容
                for (let index1 in data[index]) {
                    let td = document.createElement("td");
                    td.innerText = data[index][index1];
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            });
            //设置表格的对齐属性,和边框属性
            table.setAttribute("text-align", "right");
            table.setAttribute("border","1");
    
            return table;
        }
    
        document.querySelector("div").appendChild(buildTable(MOUNTAINS));
    </script>
    </body>
    </html>

  • 相关阅读:
    matlab如何写一个类
    最大稳定极值区域(MSER)检测
    Excel中公式的绝对引用和相对引用单元格
    c++中自增(++)和自减(--)操作符
    C++中的c_str()函数用法
    一些常用的图像数据库
    浅谈C++中指针和引用的区别
    selenium之find_element_by_xpath定位元素
    python selenium使用
    H5页面调用手机扫一扫功能
  • 原文地址:https://www.cnblogs.com/TomHe789/p/12639533.html
Copyright © 2011-2022 走看看