<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var list = [
{ id: '1', country: '中国', captical: '北京' },
{ id: '2', country: '日本', captical: '东京' },
{ id: '3', country: '美国', captical: '华盛顿' },
{ id: '4', country: '英国', captical:'伦敦'}
]；
onload = function () {
var body = this.document.getElementsByTagName('body')[0];
var table = this.document.createElement('table');
table.border = '1';
body.appendChild(table);
var thead = this.document.createElement('thead');
for (var key in list[0]) {
var th = this.document.createElement('th');
th.innerHTML = key;
thead.appendChild(th);
}
table.appendChild(thead);
for (var i = 0; i < list.length; i++) {
var tr = document.createElement('tr');
//指向时候高亮，离开时候恢复到原来的背景色
var oldColor;
tr.onmouseover = function () {
oldColor = this.style.backgroundColor;
this.style.backgroundColor = 'yellow';
}
tr.onmouseleave = function () {
this.style.backgroundColor = oldColor;
}
table.appendChild(tr);
if (i % 2 == 0) {
tr.style.backgroundColor = 'green';
} else {
tr.style.backgroundColor = 'yellow';
}
for (var index in list[i]) {
var td = document.createElement('td');
td.innerHTML = list[i][index];
tr.appendChild(td);
}
}
}
</script>
</head>
<body>
</body>
</html>
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
