25点击按钮创建表格（createElement方式）

2019-09-09 23:06:00 阅读：304 来源： 互联网

标签：25 www 创建表格 http name taObj href var createElement

<!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,www,创建表格,http,name,taObj,href,var,createElement
来源： https://www.cnblogs.com/zhangDY/p/11494831.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

25点击按钮创建表格（createElement方式）