7,js操作table.tBodies,tHead,tFoot,rows.cells
js操作table,获取tbody:tBodies, 获取thead:tHead; 获取tfoot:tFoot; 获取tr:rows; 获取td:cells;
鼠标移入变色:
<table> <thead> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>刘一</td> <td>22</td> <td></td> </tr> <tr> <td>2</td> <td>浩二</td> <td>23</td> <td></td> </tr> <tr> <td>3</td> <td>张三</td> <td>25</td> <td></td> </tr> <tr> <td>4</td> <td>王伟</td> <td>22</td> <td></td> </tr> <tr> <td>5</td> <td>王三</td> <td>22</td> <td></td> </tr> </tbody> </table> <script>
window.onload=function(){ var oTab=document.getElementById('tab1'); var aTr=oTab.tBodies[0].rows; //隔行变色;
var iBg='';
for(var i=0;i<aTr.length;i++){ if(i%2=0){ aTr[i].style.background=' '; }else{ aTr[i].style.background='#ccc'; }
//鼠标移动变色;
aTr[i].onmouseover=function(){
iBg=this.style.background;//保留原有的背景色;
aTr[i].style.background='green';
}
aTr[i]。onmouseout=function(){
aTr[i].style.background=iBg;
} }
} </script>