<html>
<head>
<title></title>
<style>
table{
width:800px;
border-collapse:collapse;
border:1px solid #9BC2E0;
}
table td,th{
width:120px;
height:30px;
font-size:13px;
border:1px solid #9BC2E0;
}
tr.even{
background:red;
}
tr.odd{
background:blue;
}
</style>
<script> window.onload = function createTable(){ var table = document.getElementById('tableId');
var tbody = document.createElement('tbody');
var k = 0;
//创建表格
for(var i = 0;i < 25;i ++){
var tr = document.createElement('tr');
for(var j = 0;j < 5;j ++){
var td = document.createElement('td');
var text = document.createTextNode(k ++);
td.appendChild(text);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody); //隔N=3行换色，其中不包括首行
var trs = table.getElementsByTagName('tr');
for(var i = 1,len = trs.length;i < len;i ++){
/*if(i&1){
trs[i].className ='even';
}else{
trs[i].className = 'odd';
}*/
var j = parseInt((i - 1)/3);//隔N行
if(j&1){
trs[i].style.backgroundColor='#0f0';
}else{
trs[i].style.backgroundColor='#f00';
}
}
//事件委托
table.onclick = function(e){
//ie与firefox获取事件不同
var event = e || window.event;
var td = event.target || event.srcElement;
if(td.tagName === 'TD'){
alert(td.innerHTML);
}
};
}
</script>
</head>
<body>
<table id="tableId">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
<th>head 5</th>
</tr>
</thead>
</table>
</body>
</html>
备注：关于创建表格的方式的另一种写法（提升性能）：
var table = document.getElementById('tableId');
var tbody = document.createElement('tbody');
var k = 0;
//创建表格
//createDocumentFragment:创建文档碎片节点
var tbodydf = document.createDocumentFragment();
var trdf = document.createDocumentFragment();
for(var i = 0;i < 25;i ++){
var tr = document.createElement('tr');
for(var j = 0;j < 5;j ++){
var td = document.createElement('td');
var text = document.createTextNode(k ++);
td.appendChild(text);
trdf.appendChild(td);
}
tr.appendChild(trdf);
tbodydf.appendChild(tr);
}
tbody.appendChild(tbodydf);
table.appendChild(tbody);