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 ...
随机推荐
- PatentTips - Sprite Graphics Rendering System
BACKGROUND This disclosure relates generally to the field of computer graphics. More particularly, b ...
- （一一六）新浪微博client的离线缓存实现思路
上一节(一一五)利用NSKeyedArchiver实现随意对象转为二进制介绍了将随意对象转化为二进制数据和还原的方法.可用于实现本节介绍的微博数据离线缓存. 通过新浪官方的API能够发现,返回的微博数 ...
- VMWare提供三种工作模式桥接（bridge）、NAT（网络地址转换）和host-only（主机模式）
1.桥接模式 在桥接模式下,VMWare虚拟出来的操作系统就像是局域网中的一台独立的主机(主机和虚拟机处于对等地位),它可以访问网内任何一台机器.在桥接模式下,我们往往需要为虚拟主机配置IP地址.子网 ...
- xp2p系统的10点技术创新和经验总结
最近在开发完善九天鸟的xp2p系统,解决了很多技术问题,特此总结下. 第一个项目开发,非常重要,它对建立开发规范.团队协作.开发效率,有很重大的意义. 1.分页前台AJAX异步分页,用咱们自己的fup ...
- 定时清理tomcat日志文件
原文链接:https://blog.csdn.net/qq_37936542/article/details/78788466 需求:最近公司服务器发现磁盘经常会被占满,查其原因是因为大量的日志文件. ...
- php课程 4-15 数组遍历、超全局数组、表单提交数据（多看学习视频）
php课程 4-15 数组遍历.超全局数组.表单提交数据(多看学习视频) 一.总结 一句话总结:超全局数组特别有用,比如$_SERVER可以获取所有的客户端访问服务器的情况. 1.数组遍历三种方式( ...
- 非常实用全面的 C++框架，库类等资源
这次的资源涉及到了标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等,C++程序员学习必备! Jason frozen : C/C++的Jason解析生成器 Jansson ...
- 【计算机视觉】OpenCV中直方图处理函数简述
计算直方图calcHist 直方图是对数据集合的统计 ,并将统计结果分布于一系列提前定义的bins中.这里的数据不只指的是灰度值 ,统计数据可能是不论什么能有效描写叙述图像的特征. 如果有一个矩阵包括 ...
- JavaScript经典面试题（二）
前言: 近年来T行业就业者越来越多,有关于编程行业的高薪工作也变得越来越难找,竞争力越来越大,想要在众多的应聘者当中脱颖而出,面试题和笔试题一定要多加研究和琢磨,以下记录的是自己的面试过程之中遇到的一 ...
- BZOJ1415 聪聪与可可 - 期望dp
传送门 题目大意: 一张无向图上有一只猫和一只老鼠,猫先走,鼠后走.猫每次会向与其相邻的并且距离老鼠最近的点移动(若距离相等去编号较小的),如果移动一步后还没吃到老鼠,还可以再移动一步(算在一个时间内 ...