<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的问题。 求各位大虾帮下。
.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的问题。 求各位大虾帮下。
解决方案 »
- javascript checkbox
- missing;before statement
- 求救js高手: xmlDoc.load("文件路径"),解析加载的文件为另一页面表单提交过来的值?
- 我的这个函数为什么在Ie下可以正常运行,在FIREFOX下却不可以啊?哪位可以帮俺改成IE和FIREFOX都兼容的?谢谢!
- 在JS脚本中,有没有键盘输入事件?
- <a>标签简单下载文件不存在提示,js实现
- 在client端检测textbox不可空白,我哪里写错了﹖
- parent.document.all.select1.options为空域或不是对象,请问该怎样处理这个问题???
- 对File框的操作!!~
- 谢谢各位热心的朋友。如何模拟按下shift+tab ?
- JS代码修改
- 求助 !JS代码!
.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>
<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>
LZ用的什么浏览器?
我用的是IE8,这些效果都实现了的呀……
求他人对4楼代码的验证~~
删错了代码……
下面是对的了…… <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>
这个……我也不太清楚……
因为改变了样式和文字位置之后,表头就变高了,但是拖动一次后会复原……
查看了拖动代码后,就在最后执行了个setTableLayoutToFixed(); 就OK了
纯属瞎猫碰到死耗子……