求帮改进下表头移动代码 ……

bj2008huwei 2010-06-03 09:54:10



<style type="text/css">

.bg td{

font-size:12px;

text-align:left;

line-height:15px;

height:20px;

word-break:keep-all;

}

.bg td.tit{

background-color:#e2e2e2;

height:17px;

text-align:center;

line-height:15px;

word-break:keep-all;

white-space:normal;

}

.bg td.num{

    background-color:#e2e2e2;

	text-align:right;

	line-height:15px;

	width:30px;

	height:22px;

}

.resizeDivClass{

   text-align:right;

   width:1px;

   margin:0px auto 0px auto;

   background:#fff;

   border:0px;

   float:right;

   cursor:col-resize;

   white-space:normal;

} 

</style>



<script language="javascript">

function MouseDownToResize(obj){ 

setTableLayoutToFixed(); 

obj.mouseDownX=event.clientX; 

obj.pareneTdW=obj.parentElement.offsetWidth; 

obj.pareneTableW=theObjTable.offsetWidth; 

obj.setCapture(); 

} 

function MouseMoveToResize(obj){ 

    if(!obj.mouseDownX) return false; 

    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 

    if(newWidth>10) 

    { 

	var theObjTable = document.getElementById("theObjTable");

	obj.parentElement.style.width = newWidth; 

	theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 

	} 

} 

function MouseUpToResize(obj){ 

obj.releaseCapture(); 

obj.mouseDownX=0; 

} 

function setTableLayoutToFixed() 

{ 

 var theObjTable = document.getElementById("theObjTable");

 if(theObjTable.style.tableLayout=='fixed') return; 

   var headerTr=theObjTable.rows[0]; 

    for(var i=0;i<headerTr.cells.length;i++) 

    { 

    headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth; 

    } 

     

    for(var i=0;i<headerTr.cells.length;i++) 

    { 

    headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth; 

    } 

    theObjTable.style.tableLayout='fixed'; 

} 

</script> 

<script language="javascript"><!--

function theObjTable(o,a,b,c){

	var t=document.getElementById(o).getElementsByTagName("tr");

	for(var i=0;i<t.length;i++){

		t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;

		t[i].onclick=function(){

			if(this.x!="1"){

			}else{

				this.x="0";

				this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

			}

		}

		t[i].onmouseover=function(){

			if(this.x!="1")this.style.backgroundColor=c;

		}

		t[i].onmouseout=function(){

			if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

		}

	}

}

--></script>



<html> 

<title>拖动列宽的表格</title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 



<body >

<table width="100%"  class="bg"   border=1 cellspacing=0   bordercolorlight="#7b7b7b"  bordercolordark="#efefef" id="theObjTable" > 

       <tr > 

            <td class="num" >序号</td> 

            <td width="100px" class="tit" > 

            <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>  

            公司名称  

            </td> 

            <td class="tit" > 

            <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>  

            订单客户 

            </td> 

            <td class="tit" > 

            <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>  

            部门  

            </td> 

            <td class="tit" > 

            <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>  

            业务员 

            </td> 

            <td class="tit" > 

            <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>  

            交款方式 

            </td> 

      </tr> 

      <tr  > 

           <td  class="num" >1</td> 

           <td >中国电信</td> 

           <td >订单客户名称</td> 

           <td >广告部</td> 

           <td >王天一</td> 

           <td >现金</td> 

      </tr > 

      <tr  > 

           <td class="num" >2</td> 

           <td >中国移动</td> 

           <td >订单客户名称</td> 

           <td >营销部</td> 

           <td >李小红</td> 

           <td >信用卡</td> 

      </tr > 

      <tr  > 

           <td class="num" >3</td> 

           <td >中国联通</td> 

           <td >订单客户名称</td> 

           <td >市场部</td> 

           <td >王老二</td> 

           <td >银行卡</td> 

      </tr > 

</table> 

<script language="javascript"><!--

//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");

theObjTable("theObjTable","#c0c0c0","#fff","#a3a2a2");

--></script>

</body> 

</html>

当表头移动的时候，文字在单元格内（包括表头）不上下或左右移动。当缩小的时候最好能以省略号替代那显示不了的文字。不知道是js的问题还是css的问题。求各位大虾帮下。

...全文

95 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

zyzy15 2010-06-03

打赏
举报

[Quote=引用 8 楼 bj2008huwei 的回复:]
引用 7 楼 zyzy15 的回复:
我错了……
删错了代码……
下面是对的了……

HTML code

……

那个第一行第二列那里鼠标拖动的地方第一次预览的时候好像往后移位了没有在那个单元格线上，为什么刷新一次后就可以了呢？
[/Quote]

这个……我也不太清楚……

因为改变了样式和文字位置之后，表头就变高了，但是拖动一次后会复原……
查看了拖动代码后，就在最后执行了个setTableLayoutToFixed(); 就OK了
纯属瞎猫碰到死耗子……

bj2008huwei 2010-06-03

打赏
举报

[Quote=引用 7 楼 zyzy15 的回复:]
我错了……
删错了代码……
下面是对的了……

HTML code

<html>
<title>拖动列宽的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.bg td{
font-size:12p……
[/Quote]

那个第一行第二列那里鼠标拖动的地方第一次预览的时候好像往后移位了没有在那个单元格线上，为什么刷新一次后就可以了呢？你真的很厉害哦！有QQ没要向你学习学习》

zyzy15 2010-06-03

打赏
举报

我错了……

删错了代码……

下面是对的了……



<html> 

<title>拖动列宽的表格</title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

<style type="text/css">

.bg td{

    font-size:12px;

    text-align:left;

    line-height:15px;

    height:20px;

	overflow:hidden;	/*配合下面一行*/

	text-overflow:ellipsis;/*以省略号替代截除部分*/

	word-break:keep-all;	/*文字不换行*/

}

.bg td.tit{

    background-color:#e2e2e2;

    height:17px;

	vertical-align:middle;

    text-align:center;

	overflow:hidden;

	text-overflow:ellipsis;/*以省略号替代截除部分*/

	word-break:keep-all;

}

.bg td.num{

    background-color:#e2e2e2;

    text-align:right;

    line-height:15px;

    width:30px;

    height:22px;

}

.resizeDivClass{

   text-align:right;

   width:1px;

   margin:0px;

   background:#fff;

   border:0px;

   float:right;

   position:relative;/*配合下面一行*/

   top:-14px;	/*让span提升一行的高度*/

   cursor:col-resize;/*配合下面一行*/

} 

</style>

<script language="javascript">

function MouseDownToResize(obj){ 

setTableLayoutToFixed(); 

obj.mouseDownX=event.clientX; 

obj.pareneTdW=obj.parentElement.offsetWidth; 

obj.pareneTableW=theObjTable.offsetWidth; 

obj.setCapture(); 

} 

function MouseMoveToResize(obj){ 

    if(!obj.mouseDownX) return false; 

    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 

    if(newWidth>10) 

    { 

    var theObjTable = document.getElementById("theObjTable");

    obj.parentElement.style.width = newWidth; 

    theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 

    } 

} 

function MouseUpToResize(obj){ 

obj.releaseCapture(); 

obj.mouseDownX=0; 

} 

function setTableLayoutToFixed() 

{ 

 var theObjTable = document.getElementById("theObjTable");

 if(theObjTable.style.tableLayout=='fixed') return; 

   var headerTr=theObjTable.rows[0]; 

    for(var i=0;i<headerTr.cells.length;i++) 

    { 

    headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth; 

    } 

     

    for(var i=0;i<headerTr.cells.length;i++) 

    { 

    headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth; 

    } 

    theObjTable.style.tableLayout='fixed'; 

} 

</script> 

<script language="javascript"><!--

function theObjTable(o,a,b,c){

    var t=document.getElementById(o).getElementsByTagName("tr");

    for(var i=0;i<t.length;i++){

        t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;

        t[i].onclick=function(){

            if(this.x!="1"){

            }else{

                this.x="0";

                this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

            }

        }

        t[i].onmouseover=function(){

            if(this.x!="1")this.style.backgroundColor=c;

        }

        t[i].onmouseout=function(){

            if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

        }

    }

}

-->

</script>



<body >

<table width="100%" class="bg" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" >  

  <tr >  

  <td class="num" >序号</td>  

  <td width="100px" class="tit" >  

  公司名称<!-- 把文字放在了span的前面 -->

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>   

  </td>  

  <td class="tit" >  

  订单客户

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>   

  </td>  

  <td class="tit" >  

  部门

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>   

  </td>  

  <td class="tit" >  

  业务员

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>   

  </td>  

  <td class="tit" >

  交款方式

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> </td>  

  </tr>  

  <tr >  

  <td class="num" >1</td>  

  <td >中国电信</td>  

  <td >订单客户名称</td>  

  <td >广告部</td>  

  <td >王天一</td>  

  <td >现金</td>  

  </tr >  

  <tr >  

  <td class="num" >2</td>  

  <td >中国移动</td>  

  <td >订单客户名称</td>  

  <td >营销部</td>  

  <td >李小红</td>  

  <td >信用卡</td>  

  </tr >  

  <tr >  

  <td class="num" >3</td>  

  <td >中国联通</td>  

  <td >订单客户名称</td>  

  <td >市场部</td>  

  <td >王老二</td>  

  <td >银行卡</td>  

  </tr >  

</table>  

<script language="javascript"><!--

setTableLayoutToFixed(); //初始化一下，否则表头高度太大

//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");

theObjTable("theObjTable","#c0c0c0","#fff","#a3a2a2");

--></script>

</body>  

</html>

zyzy15 2010-06-03

打赏
举报

[Quote=引用 5 楼 bj2008huwei 的回复:]
引用 4 楼 zyzy15 的回复:
HTML code

<html>
<title>拖动列宽的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.bg td{
font-size:12px;
text-align:lef……
[/Quote]

LZ用的什么浏览器？
我用的是IE8,这些效果都实现了的呀……
求他人对4楼代码的验证～～

bj2008huwei 2010-06-03

打赏
举报

[Quote=引用 4 楼 zyzy15 的回复:]
HTML code

<html>
<title>拖动列宽的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.bg td{
font-size:12px;
text-align:left;
l……
[/Quote]

这样设置表头的效果好像没什么改变哦！表头里面的文字还是在往下压缩不是以省略好替代。

zyzy15 2010-06-03

打赏
举报



<html> 

<title>拖动列宽的表格</title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

<style type="text/css">

.bg td{

    font-size:12px;

    text-align:left;

    line-height:15px;

    height:20px;

	overflow:hidden;	/*配合下面一行*/

	text-overflow:ellipsis;/*以省略号替代截除部分*/

	word-wrap:no-wrap;	/*文字不换行*/

}

.bg td.tit{

    background-color:#e2e2e2;

    height:17px;

	vertical-align:middle;

    text-align:center;

	overflow:hidden;

	text-overflow:ellipsis;/*以省略号替代截除部分*/

}

.bg td.num{

    background-color:#e2e2e2;

    text-align:right;

    line-height:15px;

    width:30px;

    height:22px;

}

.resizeDivClass{

   text-align:right;

   width:1px;

   margin:0px;

   background:#fff;

   border:0px;

   float:right;

   position:relative;/*配合下面一行*/

   top:-14px;	/*让span提升一行的高度*/

   cursor:col-resize;/*鼠标样式设为左右移动的样式*/

} 

</style>

<script language="javascript">

function MouseDownToResize(obj){ 

setTableLayoutToFixed(); 

obj.mouseDownX=event.clientX; 

obj.pareneTdW=obj.parentElement.offsetWidth; 

obj.pareneTableW=theObjTable.offsetWidth; 

obj.setCapture(); 

} 

function MouseMoveToResize(obj){ 

    if(!obj.mouseDownX) return false; 

    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 

    if(newWidth>10) 

    { 

    var theObjTable = document.getElementById("theObjTable");

    obj.parentElement.style.width = newWidth; 

    theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; 

    } 

} 

function MouseUpToResize(obj){ 

obj.releaseCapture(); 

obj.mouseDownX=0; 

} 

function setTableLayoutToFixed() 

{ 

 var theObjTable = document.getElementById("theObjTable");

 if(theObjTable.style.tableLayout=='fixed') return; 

   var headerTr=theObjTable.rows[0]; 

    for(var i=0;i<headerTr.cells.length;i++) 

    { 

    headerTr.cells[i].styleOffsetWidth=headerTr.cells[i].offsetWidth; 

    } 

     

    for(var i=0;i<headerTr.cells.length;i++) 

    { 

    headerTr.cells[i].style.width=headerTr.cells[i].styleOffsetWidth; 

    } 

    theObjTable.style.tableLayout='fixed'; 

} 

</script> 

<script language="javascript"><!--

function theObjTable(o,a,b,c){

    var t=document.getElementById(o).getElementsByTagName("tr");

    for(var i=0;i<t.length;i++){

        t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;

        t[i].onclick=function(){

            if(this.x!="1"){

            }else{

                this.x="0";

                this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

            }

        }

        t[i].onmouseover=function(){

            if(this.x!="1")this.style.backgroundColor=c;

        }

        t[i].onmouseout=function(){

            if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

        }

    }

}

-->

</script>



<body >

<table width="100%" class="bg" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable" >  

  <tr >  

  <td class="num" >序号</td>  

  <td width="100px" class="tit" >  

  公司名称<!-- 把文字放在了span的前面 -->

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>   

  </td>  

  <td class="tit" >  

  订单客户

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>   

  </td>  

  <td class="tit" >  

  部门

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>   

  </td>  

  <td class="tit" >  

  业务员

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span>   

  </td>  

  <td class="tit" >

  交款方式

  <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> </td>  

  </tr>  

  <tr >  

  <td class="num" >1</td>  

  <td >中国电信</td>  

  <td >订单客户名称</td>  

  <td >广告部</td>  

  <td >王天一</td>  

  <td >现金</td>  

  </tr >  

  <tr >  

  <td class="num" >2</td>  

  <td >中国移动</td>  

  <td >订单客户名称</td>  

  <td >营销部</td>  

  <td >李小红</td>  

  <td >信用卡</td>  

  </tr >  

  <tr >  

  <td class="num" >3</td>  

  <td >中国联通</td>  

  <td >订单客户名称</td>  

  <td >市场部</td>  

  <td >王老二</td>  

  <td >银行卡</td>  

  </tr >  

</table>  

<script language="javascript">

<!--

setTableLayoutToFixed(); //初始化一下，否则表头高度太大

//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");

theObjTable("theObjTable","#c0c0c0","#fff","#a3a2a2");

-->

</script>

</body>  

</html>

iGreenHill 2010-06-03

打赏
举报

学习，学习

bj2008huwei 2010-06-03

打赏
举报

那个表头怎么弄呢？字体还是在浮动啊！表头要让字体不浮动，实和表里面的内容一样的效果。又该怎么弄呢？？

wohaishiliumang 2010-06-03

打赏
举报





<style type="text/css">

.bg td{

font-size:12px;

text-align:center;

line-height:15px;

height:20px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;/*以省略号替代截除部分*/

}

.bg td.tit{

background-color:#e2e2e2;

height:17px;

text-align:center;

line-height:15px;

}

.bg td.num{

    background-color:#e2e2e2;

    text-align:right;

    line-height:15px;

    width:30px;

    height:22px;

}

.resizeDivClass{

   text-align:right;

   width:1px;

   margin:0px auto 0px auto;

   background:#fff;

   border:0px;

   float:right;

   cursor:col-resize;

   white-space:normal;

} 

</style>