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 ...
随机推荐
- 11G、12C安装结束需要做的一些操作
修改spfile参数:修改前,先备份 create pfile from spfile; alter system set memory_target=0 scope=spfile;alter sys ...
- jquery 点击其他地方
<script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) ...
- new File(String Path)加载资源问题
2017-12-17 15:07:38 [原创-wx] 一.我们在用IO流加载资源的时候,创建文件资源 1 File file = New File("String Path" ...
- PHP移动互联网开发笔记（8）——MySQL数据库基础回顾[2]
一.数据表 为了确保数据的完整性和一致性,在创建表时指定字段名称,字段类型和字段属性外,还需要使用约束(constraint),索引(index),主键(primary key)和外键(foregin ...
- MUI简介-最接近原生App体验的前端框架
MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...
- iOS项目中所有icon的尺寸以及命名
一般icon以下几个: Icon.png – 57×57 iPhone (ios5/6) Icon@2x.png – 114×114 iPhone Retina (ios5/6) Icon-72.pn ...
- iOS 下载功能：断点下载（暂停和开始）（NSURLConnectionDataDelegate方法）
1,model文件代码 文件名称:HMFileDownloader.h #import <Foundation/Foundation.h> @interface HMFileDownloa ...
- wpf SnapsToDevicePixels
原文:wpf SnapsToDevicePixels 可以在您的根元素上将此属性设为 true,以在整个 UI 上启用像素对齐呈现. 对于运行在大于 96 每英寸点数 (dpi) 的设备,像素对 ...
- Canvas,Matrix的变换顺序
Canvas的几何变换是倒序的,Matrix是正序. 比如先平移在旋转: canvas.rotate(); canvas.translate(); //translate先执行,rotate后执行 M ...
- Android app 第三方微信支付接入详解
微信支付做了好几遍了,都没有出现什么棘手的问题,下面一一为大家分享一下,欢迎吐槽. 还是老样子,接入微信的支付要第一步添加微信支付官方的包libammsdk.jar 首先就处理略坑的一个问题,app应 ...