用col元素快速改变table某列的背景色

col元素，一个不怎么被提起的元素，甚至有些人根本不知道它的存在，它是表格table中用于控制列的这么一个元素，如果用好了，有时候还是很方便的，譬如接下来要讲的当鼠标点击表格头部某一列时如何改变整列的背景色，OK就来试试

< html >
< head >
   < style  type ="text/css" >
   table { border-collapse : collapse ; border : 1px solid #666 }
   td { border-collapse : collapse ; border-bottom : 1px solid #666 }
   thead td { background : #ddd ;  cursor : pointer }
   .sel { font-weight : 22px ;  background : green ;  color : red ; }
</ style >
< script  type ="text/javascript" >    
    function  selT(event){     
       var  cols  =  document.getElementsByTagName( ' col ' );
       var  len  =  cols.length;
       var  event  =  event  ||  window.event;
       var  srcEle  =  event.srcElement || event.target;
       if (srcEle.tagName.toLowerCase()  ==   ' td ' ){
            var  index  =  srcEle.cellIndex;
            for ( var  i  =   0 ; i  <  len; i ++ ){
               index  ==  i ? cols[i].className  =   ' sel '  : cols[i].className  =   '' ;
           }
      }
   }
</ script >
</ head >
< body >
< table  width ="300" >
   < col  align ="left"   />
   < col  align ="left"   />
   < col  align ="right"   />
   < thead  onclick ="selT(event);" >
     < tr >< td >ISBN </ td >< td >Title </ td >< td >Price </ td ></ tr >
   </ thead >
   < tr >< td >3476896 </ td >< td >My first HTML </ td >< td >$53 </ td ></ tr >
   < tr >< td >2489604 </ td >< td >My first CSS </ td >< td >$47 </ td ></ tr >
   < tr >< td >3476896 </ td >< td >My first HTML </ td >< td >$53 </ td ></ tr >
   < tr >< td >2489604 </ td >< td >My first CSS </ td >< td >$47 </ td ></ tr >
</ table >
</ body >
</ html >

 

 

 

转载于:https://www.cnblogs.com/fuyun2000/archive/2012/04/01/2427890.html