关闭

用js 动态进行创建列表,点击按钮时,动态创建一个两行三列的表格

标签: javascript
2065人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js练习五</title>
<script type="text/javascript">
        var dict = {
        '百度':'http://www.baidu.com',
        '新浪':'http://www.sina.com.cn',
        '谷歌':'http://www.g.cn'
    };
    window.onload = function () {
        document.getElementById('btn').onclick = function () {
            //动态创建表格
            var tableWebsiteList = document.createElement('table');
            tableWebsiteList.border = "1";
            //1.1遍历数据动态建行
            for (var key in dict) {
                var trObject = document.createElement('tr');
                var td1 = document.createElement('td');
                td1.innerHTML = key;
                var td2 = document.createElement('td');
                td2.innerHTML = '<a href="' + dict[key] + '">' + key + '</a>';
                trObject.appendChild(td1);
                trObject.appendChild(td2);
                tableWebsiteList.appendChild(trObject);
            }
            //把表格加到body中
            document.body.appendChild(tableWebsiteList);
        };
    };
    </script>
</head>
<body>
<input type="button" name="button" value="OK" id="btn">
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14872次
    • 积分:364
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:1篇
    • 译文:1篇
    • 评论:0条
    文章分类
    文章存档