<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>