表格這么丑 還有人用嗎
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格</title>
<style>
thead{
background-color: aquamarine;
}
thead td{
color: black;
font-size: 20px;
}
</style>
<script>
window.onload = function () {
var table = document.getElementById("table1");
var td1 = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1].getElementsByTagName("td")[1];
//表格的簡便操作
var td2 = table.tBodies[0].rows[1].cells[1];
console.log(td1.innerHTML); // cat
console.log(td2.innerHTML); // cat
console.log(table.rows.length); // 5 把表頭也算上了
console.log(table.tBodies[0].rows.length); // 4
var oldColor;
for(var i=0; i < table.tBodies[0].rows.length; i++){
// 移入變色
table.tBodies[0].rows[i].onmouseover = function(){
oldColor = this.style.background;
this.style.background = "red";
}
table.tBodies[0].rows[i].onmouseout = function(){
this.style.background = oldColor;
}
// 隔行變色
if(i%2){
table.tBodies[0].rows[i].style.background = "#ccc";
} else{
table.tBodies[0].rows[i].style.background = "#fff";
}
}
}
</script>
</head>
<body>
<table id="table1" border="1" width="500">
<!--表頭-->
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</thead>
<!--內(nèi)容 <tbody>最好加上 因?yàn)椴粚?運(yùn)行的時候 審查元素的時候會發(fā)現(xiàn) 系統(tǒng)給你自動加上了tbody-->
<tbody>
<tr>
<td>1</td>
<td>jack</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>cat</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>lily</td>
<td>38</td>
</tr>
<tr>
<td>4</td>
<td>tom</td>
<td>48</td>
</tr>
</tbody>
</table>
</body>
</html>
QQ圖片20170316104413.png
