js动态创建表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
//根据键值对创建表格
onload = function () {
document.getElementById('btn').onclick = function () {
//创建一个表格
var tbObj = document.createElement('table');
tbObj.border = '1'; //边框
//根据键值对的个数创建行
for (var item in dic) {
//创建行
var trObj = document.createElement('tr');
//创建单元格
var tdObj1 = document.createElement('td');
if (typeof (tdObj1.innerText) == 'string') {//检测
tdObj1.innerText = item; //显示文本
} else {
tdObj1.textContent = item;
}
//创建单元格
var tdObj2 = document.createElement('td');
tdObj2.innerHTML = '<a href="' + dic[item] + '">' + item + '</a>';
//单元格添加到行中
trObj.appendChild(tdObj1);
trObj.appendChild(tdObj2);
//行添加到表中
tbObj.appendChild(trObj);
}
//把表格添加到body中
document.body.appendChild(tbObj);
};
};
</script>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
</body>
</html>
兼容写法
<script type="text/javascript">
var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
onload = function () {
document.getElementById('btnCreate').onclick = function () {
//创建表格
var tbObj = document.createElement('table');
tbObj.border = '1';
//创建行和列
for (var key in dic) {
//根据表创建行
var trObj = tbObj.insertRow(-1);
//根据行创建列
var tdObj1 = trObj.insertCell(-1);
tdObj1.innerText = key;
var tdObj2 = trObj.insertCell(-1);
tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
}
//添加到body中
document.body.appendChild(tbObj);
};
};
js动态创建表格的更多相关文章
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- js动态创建表格------Day59
刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...
- js动态创建表格方法
window.onload = function(){ var table = document.createElement('table'); table.border = 1; table.wid ...
- js 动态生成表格案例
<1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...
- js/jq动态创建表格的行与列
之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...
- js如何动态创建表格（两种方法）
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- 第84天：jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- javascript动态创建表格：新增、删除行和列
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...
随机推荐
- Java工具类：给程序增加版权信息
我们九天鸟的p2p网贷系统,基本算是开发完成了. 现在,想给后端的Java代码,增加版权信息. 手动去copy-paste,太没有技术含量. 于是,写了个Java工具类,给Java源文件 ...
- PatentTips - Sprite Graphics Rendering System
BACKGROUND This disclosure relates generally to the field of computer graphics. More particularly, b ...
- ArcGIS Engine 编辑- IWorkspaceEdit
转自原文 ArcGIS Engine 编辑- IWorkspaceEdit 这个例子中,我创建了1000条要素,并结合缓冲将数据写到文件中,并且添加了时间统计,当然数据是我捏造的,还请原谅,这个花费的 ...
- SendMessageTimeout 的使用
在WINDOW编程中,发送消息的常用API有SendMessage,PostMessage,PostThreadMessage. 一般每个线程有两个队列:一个用来接收通过Send函数的消息,另外一个队 ...
- 【t058】拜年
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 拜年是中国人少不了的风俗.还没过年呢,刚上小学的妮妮已经等不及要给她的小伙伴去拜年了,但是她不知道如何 ...
- js进阶 10-10 可见伪类选择器和内容伪类选择器的作用
js进阶 10-10 可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是 四个 包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...
- 如何在一个div中使其子div居中
网上其他地方已讲述过对其的不同实现方式,今天主要做一个详细的汇总,希望对大家有帮助. ps:我面试的时候就被问到过这个问题,当时都回答错了,蓝瘦. 假设父div的类名为father,子div的类名为s ...
- 设计模式<面向对象的常用七大设计原则>
面向对象设计的目标之一在于支持可维护性复用,一方面需要实现设计方案或者源码的重用,另一方面要确保系统能够易于扩展和修改,具有较好的灵活性. 常用的设计原则有七个原则: 1.单一职责原则(single ...
- Oracle数据库零散知识09 -- DBLink的创建（转）
通过创建database link实现Oracle跨数据库查询的方法 在Oracle本地数据库端执行赋权dbuser帐号 SQL> grant create database link to d ...
- MyCat负载均衡 下篇
MyCat负载均衡 下篇 之前在 一步一步在Windows中使用MyCat负载均衡 上篇 中已经讲了如何配置出MyCat.下面讲其相关的使用. 五.配置MyCat-eye 对于MyCat监控官网还 ...