js 生成表格及其颜色
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
var list = [
{ id: '1', country: '中国', capital: '北京' },
{ id: '2', country: '美国', capital: '华盛顿' },
{ id: '3', country: '日本', capital: '东京' },
{ id: '4', country: '韩国', capital: '首尔' }
];
var body = document.getElementsByTagName('body')[0];
var table = document.createElement('table');
table.border = '1px solid red';
body.appendChild(table);
var thead = document.createElement('thead');
table.appendChild(thead);
var item0 = list[0];
for (var key in item0) {
var tdh = document.createElement('td');
tdh.innerHTML = key;
thead.appendChild(tdh);
}
for (var i = 0; i < list.length; i++) {
var tr = document.createElement('tr');
if (i % 2 == 0) {
tr.style.backgroundColor = 'yellow';
} else {
tr.style.backgroundColor = 'lightBlue';
}
table.appendChild(tr);
var item = list[i];
for (var key in item) {
var td = document.createElement('td');
td.innerHTML = item[key];
tr.appendChild(td);
}
}
}
</script>
</head>
<body>
</body>
</html>
最新文章
- shiro重新赋值权限
- TCP/ip协议栈之内核调优
- RMQ问题(线段树+ST算法)
- Matrix multiplication hdu4920
- 如何获得JVM执行过程中调用的方法名
- Tesseract 3.02中文字库训练
- 深入理解Arrays.sort() (转)
- css3动画transition详解2
- 分布式版本管理工具 git常用命令
- Linux学习之路4——文件IO打开、创建、读写操作
- 3.1circle
- Springboot 拦截器的背后
- Convert Adjacency matrix into edgelist
- navicat下创建和执行存储过程
- 把jQuery的类、插件封装成seajs的模块的方法
- 【大数据系列】HDFS安全模式
- day37 mysql数据库学习
- 洛谷——P1747 好奇怪的游戏
- 如何在IIS中承载WCF NetTcpBinding 服务
- es6 import笔记