搜了一段代码,为了适应自己需要,简单改了一下,还可用。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
table{
border-left:1px solid black;
width:100%;
border-top:1px solid black
}
td{
border-bottom:1px solid black;
border-right:1px solid black;
overflow:hidden
}
th{
-moz-user-select: none;
}
.resizeDivClass{
PADDING-RIGHT: 0px;
MARGIN-RIGHT: 0px;
float:right;
cursor:e-resize;
HEIGHT: 100%;
width:4px;
}
</style>
</head>
<body>
<div style="width:1100" >
<table style="table-layout:fixed" id="table1">
<tr>
<td>Jane</td>
<td>5555</td>
<td>right here</td>
</tr>
<tr>
<td>Jane</td>
<td>上个月一艘前往伊朗港口的运载3.6万吨小麦的香港籍货船连同25名船员被海盗劫持,伊朗曾与海盗进行谈判,但现在伊朗决定用武力来营救船员。2个月前,伊朗政府曾经为一艘被劫持的伊朗货船交付了赎金</td>
<td>I don't care</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
document.body.attachEvent("onmousemove",MouseMoveToResize);
document.body.attachEvent("onmouseup",MouseUpToResize);
var tabObj = document.getElementById("table1");
for(var i=0;i<tabObj.rows(0).cells.length;i++){
var oSpan = document.createElement("SPAN");
oSpan.attachEvent("onmousedown",MouseDownToResize);
oSpan.attachEvent("onmouseup",MouseUpToResize);
oSpan.className = "resizeDivClass";
tabObj.rows(0).cells[i].appendChild(oSpan);
}
var dragobj=null;
function MouseDownToResize(){
var event = window.event;
var obj = event.srcElement;
obj.focus();
document.body.style.cursor = "e-resize";
obj.parentTdW=obj.parentNode.offsetWidth;
var sibling = obj.parentNode.nextSibling;
obj.siblingW = sibling.offsetWidth;
obj.totalWidth = obj.siblingW + obj.parentTdW;
if(obj.parentElement)
obj.mouseDownX=event.clientX;
else
obj.mouseDownX=event.pageX;
dragobj=obj;
}
function MouseMoveToResize(event){
var e = event||window.event;
if(dragobj==null)
return false;
if(!dragobj.mouseDownX)
return false;
newWidth=dragobj.parentTdW+e.clientX-dragobj.mouseDownX;
var sibling = dragobj.parentNode.nextSibling;
//if width of column does not exceed minimum width 80, set column width
if(newWidth>80 && (dragobj.totalWidth-newWidth)>80){
dragobj.parentNode.style.width = dragobj.parentTdW+e.clientX-dragobj.mouseDownX;
sibling.style.width = dragobj.siblingW-e.clientX+dragobj.mouseDownX;
}
}
function MouseUpToResize(){
if(dragobj==null) return false;
dragobj.mouseDownX=0;
document.body.style.cursor = "";
dragobj=null;
}
</script>
分享到:
相关推荐
一个jquery插件,可以方便地将html中的table实现为可以手动拖动并调整列宽。使用方法简单,例$("#tb").ZTable();
鼠标拖动列宽 浏览器兼容性 firefox ie opera 用法说明 simpleHtmlDataGrid与目前市场中的datagrid控件不同,它更加像一个插槽,开发者需要按照具体所需进行扩展。 参考目录中的例子及api,实例可查看源代码 ...
•列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •...
是初学者的例子,很简单 ,很实用
内容索引:C#源码,文件操作,XML C# 读取外部XML文件并显示在表格中,通过点击“浏览XML”按钮,找到你要读取的文件,点击打开后XML的数据就会显示在窗体的列表框中,列表框还可以拖动列宽,改变列高。虽然这是个很小...
模式一允许你向控件绑定大量数据,但控件只绘制当前可见行,用户可以拖动纵向滚动条来查看其它行的数据。模式二让控件一次性绘制所有行,在适量数据情景下,该模式让控件运行更流畅,用户体验更佳。模式三让控件根据...
自己的第一个数据透视表.xls2.1轻松改变数据透视表的整体布局.xls2.2...拖动法快速改变行字段的数据项排列顺序.xls2.11按指定规则调整部门字段中的数据项顺序.xls2.12以大纲形式显示数据项目.xls2.13在每项分类...
实例045 用数组设置JTable表格的列名与列宽 55 3.2 数组操作 57 实例046 数组的下标界限 57 实例047 按钮控件数组实现计数器界面 58 实例048 复选框控件数组 59 实例049 用数组反转字符串 60 3.3 数组排序与查询 61 ...