首页 > 其他 > 详细

点击按钮动态生成表格

时间:2019-06-09 15:10:12      阅读:167      评论:0      收藏: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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!