<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;
}
.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 0 0px 0;
background:#fff;
border:0px;
float:right;
cursor:e-resize;
}
</style>
[code=JScript]
<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 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>
[/code]这是一个实现,表头可拖动的效果,谁帮我解释解释下里面的js箭头的样式帮改变一下,和表格里在拖动缩小的时候文字,不往下叠加
解决方案 »
- 【求助】JavaScript如何让PNG图片在IE6下面透明
- javascript截取字符串中的数字,急!急!急!急!路过的高手帮小弟看看啊
- 找人解释一下这段js代码?很难理解?谢谢!
- 关于工作流表单设计器设计的问题
- 修复了一个prototype.js 的 ajax和json.js在firefox下混合使用的问题
- 关于checkbox全选的问题,请帮我看看。
- 求助~~关于正则表达式
- 百度首页和豆丁首页都可拖拽编辑,并且下次访问会保留上次的修改,如何实现保存用户的修改并自动加载的
- 很简单的问题,在线等待请帮助我
- 一个很急问题,大家快帮帮忙,在线给分
- 求助 !JS代码!
- Jquery Json Select 问题
font-size:12px;
text-align:left;
line-height:15px;
height:20px;
white-space:nowrap; /* 加上这一句就行了*/
}
.bg td 增加了word-break:keep-all,防止文字换行;
.resizeDivClass 的cursor:e-resize 改为 cursor:hand,将指针变为手型
箭头样式是指的这个吧?
效果如下<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;
word-break:keep-all
}
.bg td.tit{
background-color:#e2e2e2;
height:17px;
text-align:center;
line-height:15px;
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 0 0px 0;
background:#fff;
border:0px;
float:right;
cursor:hand;
}
</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 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>
先是设置鼠标事件的各个处理函数
在鼠标按下处理函数MouseDownToResize里:
setTableLayoutToFixed();//首先调用它使表格对象的tableLayout属性为fixed,即可调整状态。
obj.mouseDownX=event.clientX; //存储鼠标X坐标
obj.pareneTdW=obj.parentElement.offsetWidth; //存储当前SPAN对象所在的TD对象的宽度。
obj.pareneTableW=theObjTable.offsetWidth; //存储当前SPAN对象所在的TABLE对象的宽度。
obj.setCapture(); //开始监视鼠标拖动行为,使MouseMove和MouseUp得以捕获因为上面设了监控,拖动时触发MouseMoveToResize函数:
if(!obj.mouseDownX) return false; //若不是从MouseDownToResize函数正常进入则退出
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; //计算宽度的公式
if(newWidth>10) //宽度大于10时都允许缩小,即最小宽度为10
{
var theObjTable = document.getElementById("theObjTable");
obj.parentElement.style.width = newWidth; //设置span所在td的宽度
theObjTable.style.width=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; //设置table宽度
}
}
鼠标松开后,执行MouseUpToResize函数
obj.releaseCapture(); //释放对鼠标的监控
obj.mouseDownX=0; //重置变量
.resizeDivClass 的 cursor:col-resize;表头动是因为里面有两部分,一部分是<span>,后面是文字
这个可能不太好解决……
<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>
上面代码有误,样式表相应部分请改用如下代码
或参看 http://topic.csdn.net/u/20100603/09/16c620c8-575d-48a3-a143-13c4b067fa7c.html
7楼的整体代码
.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;
}