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生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- JQuery动态添加表格，然后动态删除不成功问题
背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...
- WPF GridView动态添加项并读取数据
假设数据库有如下表, 首先我们创建一个WPF工程,界面如下 <Window x:Class="WpfApplication2.MainWindow" xmlns=" ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- layui 动态添加 表格数据
静态表格: <table class="layui-table" id="table" lay-filter="table"> ...
- javascript动态添加本地文件列表信息
工作需要做了一个动态添加列表页面的小demo.用到了杂七杂八的javascript小知识. 而且并没有涉及到工作中的具体情境.有些通用,所以暂且罗列到这里.以后需要的时候可以直接拿来用. 看源码总是让 ...
随机推荐
- 在CentOS-6.3环境下，利用grub工具手工制作Linux U盘安装盘
注:此文是本人亲自操作实现后写的心得,同时也是对自己操作的记录. 制作的全过程概况 准备工作: U盘重新分区: 格式化U盘: 安装grub文件到U盘特定的分区: 拷贝镜像中的相关文件到U盘: 安装时设 ...
- python自带的排列组合函数
需求: 在你的面前有一个n阶的台阶,你一步只能上1级或者2级,请计算出你可以采用多少种不同的方法爬完这个楼梯?输入一个正整数表示这个台阶的级数,输出一个正整数表示有多少种方法爬完这个楼梯. 分析:提炼 ...
- 【guava】对象处理
一,equals方法 我们在开发中经常会需要比较两个对象是否相等,这时候我们需要考虑比较的两个对象是否为null,然后再调用equals方法来比较是否相等,google guava库的com.goog ...
- org.apache.storm.utils.NimbusLeaderNotFoundException: could not find leader nimbus from seed hosts["datanode9"]. Did you specify a valid of nimbus hosts for config nimbus.seeds?
出现这个异常的原因主要是zookeeper没有正常工作引起的.可以在storm-conf-storm.yaml中设置 storm.zookeeper.servers: -"zookeeper ...
- Optimizing and caching browser bundles...
扎心了,老铁!!! 他妈的,弄了几天都是卡在这里!!上网查了一下.说是我的内存不够,好吧.我慢慢等,然而让我等了好几天都没什么反应..两天了,一直卡在这里.今天在虚拟机也是发狠了. 我直接把虚拟机的内 ...
- 搭建git服务器（临时服务器，命令行形式，针对2到5人左右，轻量）
服务端配置 ############################################################################################## ...
- css grid学习笔记
仅为自己用而收藏罢了 w3c官方文档 https://www.w3.org/TR/css-grid-1/#grid-items w3cplus(zhongwenban ) 大漠博主的系列文章 基础知识 ...
- Qt 学习之路 2（70）：进程间通信
Qt 学习之路 2(70):进程间通信 豆子 2013年11月12日 Qt 学习之路 2 16条评论 上一章我们了解了有关进程的基本知识.我们将进程理解为相互独立的正在运行的程序.由于二者是相互独立的 ...
- windows cmd下创建虚拟环境virtualenv
一:虚拟环境virtualenv 如果在一台电脑上, 想开发多个不同的项目, 需要用到同一个包的不同版本, 如果使用上面的命令, 在同一个目录下安装或者更新, 新版本会覆盖以前的版本, 其它的项目就无 ...
- Linux 安装 Djiango
yum 安装方法 以下安装位于 Centos Linux 环境下安装,如果是你的 Linux 系统是 ubuntu 请使用 apt-get 命令. 默认情况下 Linux 环境已经支持了Python. ...