动态调整列宽
程序员文章站
2022-04-03 10:04:54
...
<html>
<head>
<title> 动态调整列宽-包子剑客-V3 </title>
<!--2010.02.04 包子剑客 广州-->
<style>
table{table-layout:fixed}
td{white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
th{border:1px solid Black;}
</style>
<script>
var curCol,curTable;//获取左边的位置
var curCol_left,newPlace;
var dragState=0;
function getTable(item)
{
var obj = null;
do {
if (item.tagName == "TABLE"){
obj = item;
break;
}
item = item.offsetParent;
} while (item != null);
return obj;
}
function calculateOffset(item, offsetName)
{
var totalOffset = 0;
do{
totalOffset += eval('item.offset' + offsetName);
item = item.offsetParent;
} while (item != null);
return totalOffset;
}
function drag_colMov(objCol){
if (dragState > 1) return true;
curCol_left = calculateOffset(objCol, "Left");
curTable =getTable(objCol);
if (window.event.x + window.document.body.scrollLeft > curCol_left + objCol.offsetWidth - 5){
//移动到了相应的部位，改变鼠标指针
dragState = 1;
curTable.style.cursor = "col-resize";
curCol = objCol;
}else if (dragState<=1){
dragState = 0;
curTable.style.cursor = "default";
}
}
function drag_colOut(objCol){
if (dragState<=1) {
curTable.style.cursor = "default";
dragState = 0;
}
}
function drag_tableDow(objTable){
if (1 == dragState){
curTable.style.cursor = "col-resize";
dragState = 2;
}else{
curTable.style.cursor = "default";
}
}
function drag_tableMov(objTable) {
if (dragState >= 2) {
curTable.style.cursor = "col-resize";
dragState=3;
var newPlace = window.event.x + window.document.body.scrollLeft
var curWidth = newPlace - curCol_left;
curCol.style.width = curWidth + "px"; //调整列宽度
}
}
function drag_tableUp(objTable){
curTable.style.cursor = "default";
dragState=0;
}
</script>
</head>
<body>
<!--
使用自动省略的条件：
table 样式包含 style="table-layout:fixed;"
td 样式包含 style="white-space:nowrap;overflow: hidden;text-overflow:ellipsis;"
-->
<table style="border:1px solid red;table-layout:fixed;" onmousedown="drag_tableDow(this)" onmouseup="drag_tableUp(this)" onmousemove="drag_tableMov(this)" >
<tr>
<th width="25%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">id</th>
<th width="10%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">name</th>
<th width="15%" onmousemove="drag_colMov(this)" onmouseout="drag_colOut(this)">pass</th>
<th>sec</th>
</tr>
<tr>
<td>多出部分自动省略的效果，这里有自动省略的效果</td>
<td>baoziasfgdsgasdgsadfsffsdf</td>
<td>12345421545235235636</td>
<td>1</td>
</tr>
<tr>
<td>112412453245235235325</td>
<td>zhqwryqeirtearfew</td>
<td>1254215qei略的略的qeiqeiqei45234</td>
<td>0</td>
</tr>
</table>
</body>
</html>
下一篇： 微信授权参数丢失问题