javascript动态添加表格以及获取数据

最新推荐文章于 2022-11-24 14:07:19 发布

weixin_30912051

最新推荐文章于 2022-11-24 14:07:19 发布

阅读量253

点赞数

原文链接：http://www.cnblogs.com/shapaozi/p/7045973.html

版权

 <script type="text/javascript">
        var dict = {
            '百度': 'http://wwww.baidu.com',
            '新浪': 'http://www.sina.com',
            '谷歌':'http://www.google.com'
        }
        window.onload = function () {
            //注册点击事件
            document.getElementById('btn1').onclick = function () {
                //动态创建表格
                var tablewebsiteList = document.createElement('table');
                tablewebsiteList.border = '1';
                //遍历数据
                for (var key in dict) { 
                    //创建行对象
                    var trObject = document.createElement('tr');
                    //创建列对象
                    var td1 = document.createElement('td');
                    td1.innerHTML = key;
                    var td2 = document.createElement('td');
                    //根据key找到链接
                    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="name" value="动态生成表格对象"id="btn1" />
</body>

转载于:https://www.cnblogs.com/shapaozi/p/7045973.html

weixin_30912051

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript动态添加表格以及获取数据

<script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'http://www.sina.com', '谷歌':'http://www.google.com' ...
复制链接

扫一扫