表格列宽可拖动的例子

最新推荐文章于 2020-12-30 09:48:22 发布

原创最新推荐文章于 2020-12-30 09:48:22 发布

· 518 阅读

0 ·

版权

文章标签：

#HTML

搜了一段代码，为了适应自己需要，简单改了一下，还可用。
<!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>