首页 > 其他 > 详细

25点击按钮创建表格(createElement方式)

时间:2019-09-10 00:57:24      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:doc   end   一个   asc   onclick   common   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
          width: 200px;
          height: 200px;
          border: 1px solid red;
        }
      </style>
    </head>
    <body>
        <input type="button" value="创建表格" id="btn" />
        <div id="dv"></div>
        <script src="common.js"></script>
        <script type="text/javascript">
            var arr = [
                {name: "百度",href: "http://www.baidu.com"},
                {name: "谷歌",href: "http://www.google.com"},
                {name: "优酷",href: "http://www.youku.com"},
                {name: "土豆",href: "http://www.tudou.com"},
                {name: "快播",href: "http://www.kuaibo.com"},
                {name: "爱奇艺",href: "http://www.aiqiyi.com"}
            ];
            //添加按钮点击事件
            my$("btn").onclick = function() {
                //创建table元素,并且追加到父元素div中
                var taObj = document.createElement("table");
                taObj.border = "1";
                taObj.cellPadding = "0";
                taObj.cellSpacing = "0";
                my$("dv").appendChild(taObj);

                for (var i = 0; i < arr.length; i++) {
                    //创建行,在行中添加内容,并且追加到父元素table中
                    var trObj = document.createElement("tr");
                    taObj.appendChild(trObj);
                    //创建第一个列,然后加入到行中
                    var td1 = document.createElement("td");
                    td1.innerHTML = arr[i].name;
                    trObj.appendChild(td1);
                    //创建第二个列,然后加入到行中
                    var td2 = document.createElement("td");
                    td2.innerHTML = "<a href=" + arr[i].href + ">" + arr[i].name + "</a>";
                    trObj.appendChild(td2);
                }
            };
        </script>

    </body>
</html>

技术分享图片

25点击按钮创建表格(createElement方式)

标签:doc   end   一个   asc   onclick   common   

原文:https://www.cnblogs.com/zhangDY/p/11494831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号