<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>
<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';
}
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>
IE only from:http://www.jb51.net/article/21201.htm
分享到:
相关推荐
本程序主要是用table表格拖动改变td宽度。
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
用jquery实现table拖拽列功能,可动态改变表格列宽度,并且实现table表格100%的问题,如果列缩小,则自动拉伸最后一列以实现table100%的效果,如果拉伸长度比原长度大,则显示x滚动条。
拖动列宽的表格</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:...
拖动单元格改变列宽或行高,可以扩展成表格设计器,改变tr 行高 td 列宽
实现boostrap表格td宽度可以自由拖动。简单易用,内含源代码
本javascript软件主要功能是任意拖动html的table的td来整行交换位置。
实现了bootstrapTable 的列宽可鼠标拖动,方便查看列宽显示不完全的内容,前台js
改变table的列宽度,可以拖拽的td表格,表格内文字只显示一行,超过的部分自动隐藏
实现bootstrap table可设置列宽和可拖动列宽 Bootstrap Table列宽拖动的方法 Bootstrap Table拖动改变列宽的方法 bootstrap-table 列宽动态拖拽改变宽度 BootStrap table实现表格行拖拽效果 bootstrap-table如何设置...
当显示的table宽度受限制固定宽度时,表格的展示列又很多的时候,如何更好地处理并展示,可下载资源查看,可拖动表格,表格可左右拖动,表格td边框可以左右拖动,表格里的内容可以很好的显示。
可拖动的table #draggable{ padding:absolute; height:600px; position:absolute; } var rDrag = { o:null, init:function(o){ o.onmousedown = this.start; }, start:function(e){ var o; e = rDrag....
web页面中通过鼠标拖动来调整table列宽的实例,用JS实现,使用起来超级简单,只需要把JS文件导入,然后在需要实现该效果的table中套用CSS就可以了,还不会的去看实例,实例中有DEMO的页面。
拖动表头改变栏位(列)的顺序,相应的table下的td的顺序也随之改变
jQuery动态改变列宽,可以实现拖动jQuery动态改变列宽,可以实现拖动
表格得拖拽 可拖拽th得宽度 使td得内容可以完全显示或者隐藏
原生javascript表格插件,可以拖动改变大小,合并单元格等 Demo 安装 npm install npm run dev 查看 localhost:8080 三种方式 初始化表格 import TableEditor from "./tableEditor" // better to replace document....
Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/...
网上找到js或jquery插件都不满足现在用的需求,所自己做个jquery插件. 主要功能类似excel对表头的操作, js文件里有使用说明。