<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动态添加表格以及获取数据的更多相关文章

  1. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  2. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  3. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  5. JQuery动态添加表格，然后动态删除不成功问题

    背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...

  6. WPF GridView动态添加项并读取数据

    假设数据库有如下表, 首先我们创建一个WPF工程,界面如下 <Window x:Class="WpfApplication2.MainWindow" xmlns=" ...

  7. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  8. layui 动态添加 表格数据

    静态表格: <table class="layui-table" id="table" lay-filter="table"> ...

  9. javascript动态添加本地文件列表信息

    工作需要做了一个动态添加列表页面的小demo.用到了杂七杂八的javascript小知识. 而且并没有涉及到工作中的具体情境.有些通用,所以暂且罗列到这里.以后需要的时候可以直接拿来用. 看源码总是让 ...

随机推荐

  1. time，datetime，calendar模块

    Python中,与时间有关的模块有time,datetime和calendar. 1.时钟时间:time 在Python中,用三种方式来表示时间:时间戳,格式化时间字符串和结构化时间. 1)时间戳,就 ...

  2. 316. Remove Duplicate Letters (accumulate -> count of the difference elements in a vector)

    Given a string which contains only lowercase letters, remove duplicate letters so that every letter ...

  3. MyBatis与JDBC的对比

    //JDBC的步骤,1.加载驱动.2.获取连接.3.执行sql语句.4.处理结果集.5.关闭资源 Class.forName("com.mysql.jdbc.Driver").ne ...

  4. (C/C++) 基本排序法

    C++ Class 宣告 class Sort{ private: void Merge(int *arr, int front, int mid, int end); int Partition(i ...

  5. CentOS 中安装 mysql 5.7+

    参考:https://www.cnblogs.com/jimboi/p/6405560.html 1.下载rpm文件 wget https://dev.mysql.com/get/mysql57-co ...

  6. 分布式中为什么要加入redis缓存的理解

    面我们介绍了mybatis自带的二级缓存,但是这个缓存是单服务器工作,无法实现分布式缓存.那么什么是分布式缓存呢?假设现在有两个服务器1和2,用户访问的时候访问了1服务器,查询后的缓存就会放在1服务器 ...

  7. Macaca，Maven，MVC框架

    Macaca:Macaca是阿里开源的一套完整的自动化测试解决方案.同时支持PC和移动端测试,支持的语言有JS,Java,Python. Maven:java,Maven项目对象模型(POM),可以通 ...

  8. IDEA 在 专注模式下 显示 行号 和 缩进线...

    16down voteaccepted +50 Open the settings and navigate to Editor > General > Appearance and ti ...

  9. C++_标准模板库STL概念介绍4-算法

    STL包含很多处理容器的非成员函数: sort() copy() find() random_shuffle() set_union() set_intersection() set_differen ...

  10. window环境下安装Python2和Python3

    一.  python 安装 1. 下载安装包 https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi # 2.7安装包 htt ...