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 ...
随机推荐
- 【76.57%】【codeforces 721A】One-dimensional Japanese Crossword
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- 给自己加油，一定要学会MFC！（刚刚发现一篇文章，兼听则明： MFC，一开始就错了）
我自己对于没有学会MFC始终耿耿于怀,都什么时代了啊,但是我仍然坚持会去学MFC,因为MFC虽然落后与复杂,但是在Windows平台上仍然是无所不能的(其实Windows平台仍然是唯一可以赚钱的平台, ...
- 【HDU5748】Bellovin
Description Peter has a sequence and he define a function on the sequence -- , where is the length ...
- 【机器学习实战】第8章 预测数值型数据：回归（Regression）
第8章 预测数值型数据:回归 <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/ ...
- erlang浅谈
优点: 1.面向并发,有成熟而且久经考验的框架可供使用,网络部分已经经过了良好封装 2.内存缓存解决方案进程字典,前者的读写速度是50NS-100Ns级别的 3.对二进制数据解析的语法是直观,简单,强 ...
- 属性动画Property Animation
ViewPropertyAnimation 使用方式:View.animate() 后跟 translationX() 等方法,动画会自动执行. 注意translationX实现是调用对应的set方法 ...
- tomcat启动时自动加载一个类 MyServletContextListener
目的: 我们知道在tomcat启动后,需要页面请求进行驱动来执行操作接而响应.我们希望在tomcat启动的时候能够自动运行一个后台线程,以处理我们需要的一些操作.因此需要tomcat启动时就自动加载一 ...
- 在Windows中安装MinGW-w64（有图，一步一步）
在Windows中安装MinGW-w64 发表回复 如需配合Sublime Text 3编译C程序, 请参考本站文章: 使用Sublime Text 3与MinGW-w64编译C语言程序 MinGW, ...
- JPEG图像扩展信息读取和修改
最近,项目需要使用jpg图像信息被写入(非水印),经过研究发现,Android已封装的读者jpg图片扩展信息api(ExifInterface). 通讯api住址:http://developer.a ...
- QWidget 之paint部分杂记（从Qt4.0到4.8的进化，在Qt 4.4中，Alien Widget诞生了）
Qt 4.0 automatically double-buffers Qt 4.1 QWidget::autoFillBackground Qt 4.2 delayed widget creatio ...