表格的一些便捷操作
平时我们在dom中操作一些元素都是使用document.getElementById("xx")等类型的方式，table有一些比较快捷的方式。比如tBodies、tHead、tFoot、rows、cells。
代码实现
<!DOCTYPE html>
<html>
<head>
<title>表格的一些便捷操作——tBodies、tHead、tFoot、rows、cells</title>
<style>
table{
border-top:1px solid #dcdee2;
border-left: 1px solid #dcdee2;
border-collapse: collapse;
border-spacing: 0;
}
table td,table th{
border-right: 1px solid #dcdee2;
border-bottom: 1px solid #dcdee2;
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
}
table th{
background: #f8f8f9;
}
</style>
<script>
window.onload=function(){
var oTab=document.getElementById("tab1");
// 表格中的便捷操作，可以不使用document.getElementById等形式
// 获取tbody的特殊方式，每个表格中可以有多个tbody
console.log(oTab.tBodies[0]);
// 获取tbody中的第一行
console.log(oTab.tBodies[0].rows[0]);
// 获取tbody中的第一行第一列
console.log(oTab.tBodies[0].rows[0].cells[0]);
// 获取thead和tfoot，每个表格中只有一个thead和tfoot
console.log(oTab.tHead);
console.log(oTab.tFoot);
}
</script>
</head>
<body>
<table id="tab1">
<thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>表格各行变色效果和鼠标划过高亮显示效果
代码实现
<!DOCTYPE html>
<html>
<head>
<title>表格实现各行变色、鼠标划过高亮显示</title>
<style>
table{
border-top:1px solid #dcdee2;
border-left: 1px solid #dcdee2;
border-collapse: collapse;
border-spacing: 0;
}
table td,table th{
border-right: 1px solid #dcdee2;
border-bottom: 1px solid #dcdee2;
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
}
table th{
background: #f8f8f9;
}
</style>
<script>
window.onload=function(){
var oTab=document.getElementById("tab1");
var oldColor="";
for(var i=0; i<oTab.tBodies[0].rows.length; i++){
oTab.tBodies[0].rows[i].onmouseover=function(){
oldColor=this.style.background;//进来的时候先把原先的颜色存储一下再改变颜色
this.style.background="#ebf7ff";
}
oTab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldColor;
}
if(i%2){
oTab.tBodies[0].rows[i].style.background="#f8f8f9";
}else{
oTab.tBodies[0].rows[i].style.background="";
}
}
}
</script>
</head>
<body>
<table id="tab1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>26</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计3条</td>
</tr>
</tfoot>
</table>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。