可变列宽的表格

可变列宽的表格

/*  表格  */
.ResizedColTable
{
    border-bottom : solid 2px #ACA899 ;
    border-left : solid 2px #ACA899 ;
    border-right : solid 2px #ACA899 ;
    border-top : solid 2px #ACA899 ;         
}

/*  标题行  */
.ResizedColTable .fieldTr
{
    background-color : #ECE9D8 ;
}

/*  每个标题所在的单元格  */
.ResizedColTable .fieldTd
{     
    border-top : solid 1px #fff ;
    border-bottom : solid 1px #C0C0C0 ;
    border-left : solid 1px #fff ;
    border-right : solid 1px #C0C0C0 ;
    padding : 0 0 0 0 ;
}

/*  每个标题所在的标签  */
.ResizedColTable .fieldTd .fieldNowrapDiv
{     
    cursor : default ;
    white-space : nowrap ;
    overflow : hidden ;
    text-overflow : ellipsis ;
    padding : 3px 0px 0px 3px ;
}

/*  列宽调整标签，侦听onmousedown事件的那个div */
.ResizedColTable .fieldTd .dragDiv
{
    cursor : e-resize ;
    width : 100% ;
    padding : 0 3px 0 0 ;
    display : block ;
}

/*  偶数行样式  */
.ResizedColTable .dataRow0
{
    background-color : #fafafa ;
}

/*  奇数行样式  */
.ResizedColTable .dataRow1
{
    background-color : #f0f0f0 ;
}

/*  被选中行的样式  */
.ResizedColTable .dataRowSelected
{
    background-color : #FFFFD8 ;
}

/*  数据单元格  */
.ResizedColTable .dataTd
{
    border-top : solid 1px #fff ;
    border-left : solid 1px #fff ;
    border-right : solid 1px #C0C0C0 ;
    border-bottom : solid 1px #C0C0C0 ;
    padding :  0 3px 0 0 ;
    height : 22px ;
}

/*  数据单元格里不允许换行的 Div  */
.ResizedColTable .dataTd .dataNowrapDiv
{
    white-space : nowrap ;
    overflow : hidden ;
    text-overflow : ellipsis ;
    padding : 3px 0px 0px 3px ;
}

/* **********************************
 * 可变列宽的表格 V1.0 2006-11-18
 * 样式风格:simple
 ********************************** */


/*  表格  */
.purpleTb
{
    border-bottom : solid 1px #666666 ;
    border-left : solid 1px #B5CAFF ;
    border-right : solid 1px #666666 ;
    border-top : solid 1px #B5CAFF ;         
}
.purpleTb
{
    font-size : 14px ;
}

/*  标题行  */
.purpleTb .fieldTr
{
    background-color : #ECE9D8 ;
    background-image : url(thbg.jpg) ;
}

/*  每个标题所在的单元格  */
.purpleTb .fieldTd
{     
    border-top : solid 2px #fff ;
    border-bottom : solid 1px #C0C0C0 ;
    border-left : solid 1px #fff ;
    border-right : solid 1px #666666 ;
    padding : 0 0 0 0 ;
}

/*  每个标题所在的标签  */
.purpleTb .fieldTd .fieldNowrapDiv
{     
    cursor : default ;
    white-space : nowrap ;
    overflow : hidden ;
    text-overflow : ellipsis ;
    padding : 3px 0px 0px 3px ;
}

/*  列宽调整标签，侦听onmousedown事件的那个Div  */
.purpleTb .fieldTd .dragDiv
{
    cursor : e-resize ;
    width : 100% ;
    padding : 0 3px 0 0 ;
    display : block ;
}

/*  偶数行样式  */
.purpleTb .dataRow0
{
    background-color : #fafafa ;
}

/*  奇数行样式  */
.purpleTb .dataRow1
{     
    background-color : #fff ;
}

/*  被选中行的样式  */
.purpleTb .dataRowSelected
{
    background-color : #FFFFD8 ;
}

/*  数据单元格  */
.purpleTb .dataTd
{
    border-top : solid 1px #fff ;
    border-left : solid 1px #fff ;
    border-right : solid 1px #B5CAFF ;
    border-bottom : solid 1px #B5CAFF ;
    padding :  0 3px 0 0 ;
    height : 22px ;
}

/*  数据单元格里不允许换行的 Div  */
.purpleTb .dataTd .dataNowrapDiv
{
    white-space : nowrap ;
    overflow : hidden ;
    text-overflow : ellipsis ;
    padding : 3px 0px 0px 3px ;
}

< html >
     < head >
         < title > 可变列宽的表格 </ title >
         < link  rel =stylesheet  href ="css/purple/style.css" >
         < link  rel =stylesheet  href ="css/simple/style.css" >
         < script  src ="js/ResizedColTable.js" ></ script >
     </ head >
     < body >

    可变列宽的表格
     < table  id =table1  cellpadding =0  cellspacing =0  border =0  class =purpleTb >
         < tr  class =fieldTr >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =true >< div  title =""  style ='width:45;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 操作 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 姓名 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 性别 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 年龄 </ div ></ div ></ th >

             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 电话 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:150;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > email </ div ></ div ></ th >
         < th  width =100% ></ th ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >

             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >

        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >

         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >

             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >

        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="button"  value ="删除" ></ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >

         < td  width =100% ></ td ></ tr >
        
     </ table >< script > new  ResizedColTable(document.getElementById('table1')); </ script >
    
     < br >< br >
    
     < table  id =table2  cellpadding =0  cellspacing =0  border =0  class =ResizedColTable >
         < tr  class =fieldTr >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =true >< div  title =""  style ='width:38;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 选择 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 姓名 </ div ></ div ></ th >

             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 性别 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 年龄 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:52;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > 电话 </ div ></ div ></ th >
             < th  class =fieldTd  >< div  class =dragDiv  fixed =false >< div  title =""  style ='width:150;'  onmousedown ='event.cancelBubble=true;'  class =fieldNowrapDiv > email </ div ></ div ></ th >
         < th  width =100% ></ th ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 1 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >

        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 2 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 3 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 4 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >

             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 5 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 6 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >

        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 7 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 8 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 9 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >

             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
         < tr >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv >< input  type ="checkbox" > 10 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 张三 </ div ></ td >

             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 男 </ div ></ td >
             < td  class =dataTd >< div  style ='text-align:right;'  title =""  class =dataNowrapDiv > 22 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > 1234566789 </ div ></ td >
             < td  class =dataTd >< div   title =""  class =dataNowrapDiv > [email protected] </ div ></ td >
         < td  width =100% ></ td ></ tr >
        
     </ table >< script > new  ResizedColTable(document.getElementById('table2')); </ script >

     </ body >
</ html >

/* **********************************
 * 可变列宽的表格 V1.0 2006-11-18
 ********************************** */

function  ResizedColTable(tb){
     var  DEFAULT_COL_WIDTH = 52 ;
     var  dragSpan = null , preWidth = 0 , preX = 0 , newWidth = 0 ;

     // 改变列宽 (响应 onmousedown)
     function  doMouseDown(){
         var  evt  =  arguments.length == 0   ?  event : arguments[ 0 ];
        dragSpan  =  evt.srcElement ? evt.srcElement:evt.target;
        preWidth  =  parseInt(dragSpan.firstChild.style.width);
        preX  =  evt.x ? evt.x:evt.pageX;
         if (dragSpan.setCapture){
            dragSpan.setCapture();
            dragSpan.onmousemove  =  changeColWidth;
            dragSpan.onmouseup  =  changeColWidthStop;
        } else   if (window.captureEvents){
            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            document.onmousemove  =  changeColWidth;
            document.onmouseup  =  changeColWidthStop;
        }
    }
    
     // 改变列宽 (响应 onmousemove)
     function  changeColWidth(){
         var  evt  =  arguments.length == 0   ?  event : arguments[ 0 ];
         var  newX  =  evt.x ? evt.x:evt.pageX;
        newWidth  =  newX  -  preX  +  preWidth;
         if (newWidth < 8 ) newWidth = 8 ;
        
    }
     // 改变列宽 (响应 onmouseup)
     function  changeColWidthStop(){
         if (dragSpan.releaseCapture){
            dragSpan.releaseCapture();
            dragSpan.onmousemove  =   null ;
            dragSpan.onmouseup  =   null ;
        } else   if (window.captureEvents){
            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            document.onmousemove  =   null ;
            document.onmouseup  =   null ;
        }
        dragSpan.firstChild.style.width  =  newWidth;
         var  i = dragSpan.parentNode.cellIndex;
         for ( var  j = 1 ;j < tb.rows.length;j ++ ){
            tb.rows[j].cells[i].firstChild.style.width = newWidth;
        }
    }
     // 鼠标所在行高亮显示
     function  doMouseOver(){
         this .className = " dataRowSelected " ;
    }
     // 鼠标移出行
     function  doMouseOut(){
         this .className = " dataRow " + ( this .rowIndex % 2 );
    }
    
     // 初始化
     new   function (){
         var  ths  =  tb.rows[ 0 ].cells;
         for ( var  i = 0 ;i < ths.length - 1 ;i ++ ){
             var  sp = ths[i].firstChild;
             if (sp.firstChild.style.width == "" )sp.firstChild.style.width = DEFAULT_COL_WIDTH;
             if (sp.fixed != " true " ) sp.onmousedown = doMouseDown;
             else  sp.style.cursor = " default " ;
             for ( var  j = 1 ;j < tb.rows.length;j ++ ){
                 var  tr = tb.rows[j];
                 if (i == 0 ){
                    tr.className = " dataRow " + (j % 2 );
                    tr.onmouseover = doMouseOver;
                    tr.onmouseout = doMouseOut;
                }
                tr.cells[i].firstChild.style.width = sp.firstChild.style.width;
            }
        }
    }
    
}