点击按钮动态生成表格

迷南。 2021-11-09 07:20 426阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button id="btn">点击</button>
    <div id="box"></div>
    <script src="common.js"></script>
    <script>
        var arr = [
            { names: "百度", href:"http://www.baidu.com", content: "哈哈"},
            { names: "淘宝", href:"http://www.taobao.com", content: "哈哈"},
            { names: "新浪", href:"http://www.sina.com", content: "哈哈"},
            { names: "京东", href:"http://www.jd.com", content: "哈哈"},
            { names: "京东", href:"http://www.jd.com", content: "哈哈"}
        ]
        // console.log(arr[3].href);
        //创建表格 四行两列
        my$("btn").onclick = function () {
            //判断如果有表格了,则终止后面的操作
            if(my$("table")){
                return false;// 终止后面的操作, 返回错误的结果
            }
            //1.创建table添加到div中
            var tableObj = document.createElement("table");
            tableObj.id = "table";
            tableObj.border = "1";
            tableObj.cellSpacing = "0";
            my$("box").appendChild(tableObj);
            //2.创建行并添加到table中
            for(var i = 0 ; i < arr.length ; i++){
                //每一个对象
                var arrList = arr[i];
                var trObj = document.createElement("tr");
                tableObj.appendChild(trObj);
                for(var key in arrList){
                    var tdObj = document.createElement("td");
                    //{ names: "百度", href:"http://www.baidu.com"},
                    tdObj.innerHTML = arrList[key];
                    trObj.appendChild(tdObj);
                }
    
            }
           
        }
    
    
    
    </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/Ironman725/p/10993350.html