<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. weblogic启动一闪而过

    点击startWebLogic.cmd的时候,一闪而过 我的原因:JAVA_HOME中的路径是不能带有空格:我的电脑是64位的,jdk(32位)安装路径默认带有空格还有括号,所以重新装jdk,装在没有 ...

  2. 洛谷P2510 [HAOI2008]下落的圆盘（计算几何）

    题面 传送门 题解 对于每个圆,我们单独计算它被覆盖的周长是多少 只有相交的情况需要考虑,我们需要知道相交的那段圆弧的角度,发现其中一个交点和两个圆的圆心可以构成一个三角形且三边都已经知道了,那么我们 ...

  3. 【Spring Boot-技巧】API返回值去除为NULL的字段

    简介 在前后端分离的微服务时代,后端API需要良好的规范.本篇主要将一个数据返回时的一个小技巧-- 过滤为空字段 解决痛点:将有效解决数据传输过程中的流量浪费. 组件简介 Jackson Object ...

  4. MD5和SHA-1

    MD5和SHA-1都是我们耳熟能详的术语了,很多人可能知道他们跟加密有关系,但是他们是怎么做到加密的,他们各自的特点又是什么.我来简单的讲一讲. MD5和SHA-1都被称作哈希(Hash)函数,用过J ...

  5. easyui打开dialog后给弹出框内输入框赋值问题

    在写一个弹出页面的时候,里面有一些输入框,需要在弹出的时候从数据库取值并且赋值,刚开始在弹出的时候使用$(id).val(value),结果赋值失败,为空当时纠结了一会,然后突然想到在easyui打开 ...

  6. 通过html()的方法获取文本内容， form表单组件显示的值与获取到的值不一致的问题

    我在通过 html()获取对应节点的内容,发现一个问题,获取到的 form表单组件的内容值是初始加载的值,而不是经过用户修改后的值.例如页面加载时组件<input type="text ...

  7. 老男孩Day13作业：ORM学员管理系统

    一.作业需求: 用户角色,讲师＼学员, 用户登陆后根据角色不同,能做的事情不同,分别如下 讲师视图: 管理班级,可创建班级,根据学员qq号把学员加入班级      可创建指定班级的上课纪录,注意一节上 ...

  8. js 对象 浅拷贝 和 深拷贝

    网上发现一个比较好的博客 阮一峰的感觉很不错推荐大家看看. http://www.ruanyifeng.com/blog/it/javascript/ 接下来看一下这两个拷贝方法 1.浅拷贝 拷贝就是 ...

  9. 江西理工大学南昌校区排名赛 D: 单身狗的物理游戏

    题目描述 萌樱花是一只单身狗. 萌樱花今天决定做一道理综物理题: 如图,两固定的绝缘斜面倾角均为θ,上沿相连.两细金属棒ab(仅标出a端)和cd(仅标出c端)长度均为L,质量分别为2m和m:用两根不可 ...

  10. python操作Spark常用命令

    1. 获取SparkSession spark = SparkSession.builder.config(conf = SparkConf()).getOrCreate() 2. 获取SparkCo ...