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

Posted 傻狍子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript动态添加表格以及获取数据相关的知识,希望对你有一定的参考价值。

 <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>

 

以上是关于javascript动态添加表格以及获取数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用动态添加的按钮打开模态窗口 - 纯 JavaScript

IOC 控制反转Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 创建 事件监听器 对应的 动态代理 | 动态代理的数据准备 | 创建调用处理程序 | 创建动态代理实例对象 )(代码片

Java如何做动态表格?

用js实现动态添加表格数据

jquery给表格动态添加删除行后如何获取数据

jquery表格行进行编辑 如何获取当前的行数据