/******************************************
* 没有版权 任意修改 改好了请发给我一份 O(∩_∩)O
* Email：
* QQ:52524611
*******************************************/
功能：1）鼠标拖动列宽。2）双击恢复列宽
<HTML>
<HEAD>
<TITLE>表格列宽鼠标拖动</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
</HEAD>
<mce:style><!--
.line{
position:absolute;
width:1px;
height:100px;
background-color:#000000;
}
table {
border-collapse: collapse;
border: 1 solid;
padding-left: 100px;
}
thead td {
background: #c0c0c0;
cursor: col-resize;
height: 16px;
text-align: center;
}
td div {
cursor: default;
}
td {
font:menu;
padding: 5px;
border: 1px solid;
text-align: center;
}
--></mce:style><style mce_bogus="1"> .line{
position:absolute;
width:1px;
height:100px;
background-color:#000000;
}
table {
border-collapse: collapse;
border: 1 solid;
padding-left: 100px;
}
thead td {
background: #c0c0c0;
cursor: col-resize;
height: 16px;
text-align: center;
}
td div {
cursor: default;
}
td {
font:menu;
padding: 5px;
border: 1px solid;
text-align: center;
}</style>
<mce:script language="javascript"><!--
/******************************************
* 没有版权 任意修改 改好了请发给我一份 O(∩_∩)O
* Email：jianan.ma@gmail.com
* QQ:52524611
*******************************************/
//global variable
var MouseDown=false;
var currentTd = null;
var currentTable = null;
var NewLine=null; //鼠标点击、拖动时产生的线
/******************************************
* Funciont Name: ResizeTd
* Description:
* @Param：
* @Return：
*******************************************/
function ResizeTd(){
if(event.srcElement.name!="headTd") return;
//获取当前操作的TD对象
setCurrentTd();
MouseDown=true;
NewLine = document.createElement("div");
NewLine.className = 'line';
document.body.appendChild(NewLine);
NewLine.style.height= currentTable.offsetHeight;
NewLine.style.left = document.body.scrollLeft+event.x;
NewLine.style.top = currentTable.offsetTop;
}
/******************************************
* Funciont Name: setCurrentTd
* Description:
* @Param：
* @Return：
*******************************************/
function setCurrentTd(){
var td = event.srcElement;
currentTable = td.parentElement.parentElement.parentElement;
var tdLeft = td.offsetLeft + currentTable.offsetLeft;
var thead = currentTable.rows[0].cells;
if(event.x-tdLeft<5){//鼠标位置在下一个td的左侧
if(thead[0]==td){//拖动table左侧边线是无效操作
currentTd = null;
return;
}
for(var i=1;i<thead.length;i++){
if(thead[i]==td)
currentTd=thead[i-1];
}
}else{
currentTd=td;
}
}
/******************************************
* Funciont Name: restoreTD
* Description:
* @Param：
* @Return：
*******************************************/
function restoreTD(){
if(event.srcElement.name!="headTd") return;
setCurrentTd();
if(currentTd==null) return;
currentTd.style.width='0px'
}
document.onmouseup = function(){
if(MouseDown){
MouseDown=false;
var tdWidth = parseInt(currentTd.clientWidth);
width=event.x-parseInt(currentTd.offsetLeft)-parseInt
(currentTable.offsetLeft)-tdWidth;
if(Math.abs(width)>2&&(width+tdWidth)>0){
currentTd.style.width=tdWidth+width-currentTable.offsetLeft;
}
document.body.removeChild(NewLine);
}
}
document.onmousemove = function(){
if(MouseDown){
NewLine.style.left=document.body.scrollLeft+event.x;
}
}
// --></mce:script>
<BODY>
<table id="resizeTable" onselectstart="return
false;" >
<thead>
<tr>
<td name="headTd" data="姓名"
ondblclick="restoreTD()" onmousedown="ResizeTd(this)
"><div>姓名</div></td>
<td name="headTd" data="性别"
ondblclick="restoreTD()" onmousedown="ResizeTd(this)
"><div>性别</div></td>
<td name="headTd" data="电话"
ondblclick="restoreTD()" onmousedown="ResizeTd(this)
"><div>电话</div></td>
<td name="headTd" data="住址"
ondblclick="restoreTD()" onmousedown="ResizeTd(this)
"><div>住址</div></td>
<td name="headTd" data="面貌"
ondblclick="restoreTD()" onmousedown="ResizeTd(this)
"><div>政治面貌</div></td>
<td name="headTd" data="学历"
ondblclick="restoreTD()" onmousedown="ResizeTd(this)
"><div>学历</div></td>
<td name="headTd" data="备注"
ondblclick="restoreTD()" onmousedown="ResizeTd(this)
"><div>备注</div></td>
</tr>
</thead>
<tbody>
<mce:script language="javascript"><!--
for(i=0;i<10;i++){
var html='<tr>';
html+='<td>人员'+(i+1)+'</td>';
html+='<td>男</td>';
html+='<td>12345</td>';
html+='<td>中国 江苏 南京</td>';
html+='<td>党员</td>';
html+='<td>本科</td>';
html+='<td>测试表格列宽鼠标拖动</td>';
html+='</tr> ';
document.write(html);
}
// --></mce:script>
</tbody>
</table>
</BODY>
</HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]