<HTML><HEAD><TITLE>信息列表</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<style>
.aline{
?position:absolute;
?width:1px;
?height:100px;
?background-color:#000000;
}
.headdiv{
?width:100%;
?cursor:default;
?height:100%;
?white-space:nowrap;
?text-align:center;
?text-valign="middle";
}
tr{
?background: window;
}
td{
?color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px;
?border-top: 1px solid buttonhighlight;
?border-left: 1px solid buttonhighlight;
?border-right: 1px solid buttonshadow;
?border-bottom: 1px solid buttonshadow;
}
table{
?BORDER-COLLAPSE: collapse;
?border-top: 1px solid buttonshadow;
?border-left: 1px solid buttonshadow;
}
thead td{
?background: buttonface;
?font: menu;
?border: 1px outset white;
?cursor: default;
?padding:0 3 0 0;
?border-top: 1px solid buttonhighlight;
?border-left: 1px solid buttonhighlight;
?border-right: 1px solid buttonshadow;
?border-bottom: 1px solid buttonshadow;
?height:16px;
}
</style>
<script language="javascript">
/**
* 動態改變列寬度的代碼
* 作者：黑旋風（QQ：23929003 EMAIL:lewclear97@163.com）
* 版權沒有，隨便拷貝、修改，不過希望大家能把改后的代碼發給我一份，互相學習，謝謝
*/
var ListTitleTdStartX=null;//記錄鼠標按下時的X坐標
var ListTitleTdStartWidth=0;//記錄所在td在鼠標按下時的寬度
var ListTableStartWidth=0;//記錄整個table的寬度
var MouseIsDown=false;//表示是否處于鼠標按下狀態
var ListTableResizeTd=null;//記錄所操作的td對象
var ListResizeLine=null;
/**
*鼠標按下時觸發的事件
*其作用主要是記錄所需部件的初始值
*/
function MouseDownResizeTd(obj){
? if(event.srcElement.id!="resizehead"){
?? return;
? }
? allleft=event.srcElement.offsetLeft+obj.parentElement.parentElement.parentElement.offsetLeft;
? if(setOperatorTd(obj,allleft)){//設置操作的td
?? ListResizeDiv=ListTableResizeTd.parentElement.parentElement.parentElement;//外層div
?? ListTitleTdStartX=event.x;? //記錄初始值
?? ListTitleTdStartWidth=parseInt(obj.clientWidth);
?? ListTableStartWidth=parseInt(ListTableResizeTd.parentElement.parentElement.parentElement.clientWidth)
?? MouseIsDown=true;
?? ListResizeLine=document.createElement("div");
?? ListResizeLine.className='aline';
?? document.body.appendChild(ListResizeLine);
?? ListResizeLine.style.height=ListResizeDiv.offsetHeight
?? ListResizeLine.style.left=document.body.scrollLeft+event.x-2;
?? ListResizeLine.style.top=ListResizeDiv.offsetTop;
?? ListTableResizeTd.setCapture();
? }
}
/**
* 判斷哪個才是所要操作的td
* 成功獲得返回true，否則返回false
*/
function setOperatorTd(obj,allleft){
?if(event.x-allleft<3){//如果按到的是下一個td
??? tableobj=obj.parentElement.parentElement.parentElement;
??? for(var i=0;i<tableobj.rows.length;i++){????
???? if(tableobj.rows[0].cells[i]==obj){
????? if(i==0)return false;
????? ListTableResizeTd=tableobj.rows[0].cells[i-1];
????? return true;
???? }
??? }
? }else{
?? ListTableResizeTd=obj;
?? return true;
? }
}
/**
*雙擊設置最合適寬度
*/
function setMinWidthForTd(){
?ListTableResizeTd.style.width='20px'
}
/**
*鼠標松開將一切參數還原
*/
function document.onmouseup(){
? if(MouseIsDown){
? width=event.x-ListTitleTdStartX;
? if(Math.abs(width)>2&&width+ListTitleTdStartWidth>0){
?? ListTableResizeTd.style.width=ListTitleTdStartWidth+width;
?? //ListTableResizeTd.parentElement.parentElement.style.width=ListTableStartWidth+width;
? }
? //參數全部還原
? ListTitleTdStartX=null;
? ListTitleTdStartWidth=0;
? ListTableStartWidth=0;
?? MouseIsDown=false;
?? document.body.removeChild(ListResizeLine);
?}
?if(ListTableResizeTd!=null){
???ListTableResizeTd.releaseCapture();
?}
}
/*
*鼠標移動時改變td及所在table的寬度
*/
function document.onmousemove(){
?if(MouseIsDown){
? ListResizeLine.style.left=document.body.scrollLeft+event.x-2;
?}
}
</script>
<BODY>
?<table border=1 cellpadding="0" cellspacing="0" onselectstart="return false;" >
? <thead>
?? <tr id="testtr">
???? <Td id="resizehead" style="width:20px;cursor:col-resize;overflow:none;" ondblclick="setMinWidthForTd()" onmousedown="MouseDownResizeTd(this)"><div class="headdiv">姓名</div></td>
???? <Td id="resizehead" style="cursor:col-resize;" ondblclick="setMinWidthForTd()" onmousedown="MouseDownResizeTd(this)"><div class="headdiv">性別</div></td>
???? <Td id="resizehead" style="cursor:col-resize;" ondblclick="setMinWidthForTd()" onmousedown="MouseDownResizeTd(this)"><div class="headdiv">電話</div></td>
???? <Td id="resizehead" style="cursor:col-resize;" ondblclick="setMinWidthForTd()" onmousedown="MouseDownResizeTd(this)"><div class="headdiv">住址</div></td>
???? <Td id="resizehead" style="cursor:col-resize;" ondblclick="setMinWidthForTd()" onmousedown="MouseDownResizeTd(this)"><div class="headdiv">政治面貌</div></td>
???? <Td id="resizehead" style="cursor:col-resize;" ondblclick="setMinWidthForTd()" onmousedown="MouseDownResizeTd(this)"><div class="headdiv">學歷</div></td>
???? <Td id="resizehead" style="cursor:col-resize;" ondblclick="setMinWidthForTd()" onmousedown="MouseDownResizeTd(this)"><div class="headdiv">備注</div></td>
?? </tr>
?</thead>
?? <script language="javascript">
??? for(i=0;i<10;i++){
?? var html=' <tr id="testtr">';
????? html+='<Td>人員'+i+'</td>';
????? html+='<Td>男</td>';
????? html+='<Td>45345</td>';
????? html+='<td>asdfasfasfasfasdf</td>';
????? html+='<td>sffdfgdgd</td>';
??? html+='<td>sfdgdfgdfg</td>';
????? html+='<td>asdfasfasfasfasdfdfgdfg</td>';
???? html+='</tr> ';
???? document.write(html);
??? }
?? </script>
?</table>
? </BODY>
</HTML>