表格列宽可拖动的例子

fragility

浏览: 52071 次
性别:

最近访客更多访客>>

等到放晴那天

iphitos123

bac1987007

odpsoft

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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>

分享到：