<HTML><HEAD><TITLE>信息列表</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> </head> <mce: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; } --></mce:style><style mce_bogus="1">.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> <mce: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; } } // --></mce: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;" οndblclick="setMinWidthForTd()" οnmοusedοwn="MouseDownResizeTd(this)"><div class="headdiv">姓名</div></td> <Td id="resizehead" style="cursor:col-resize;" mce_style="cursor:col-resize;" οndblclick="setMinWidthForTd()" οnmοusedοwn="MouseDownResizeTd(this)"><div class="headdiv">性别</div></td> <Td id="resizehead" style="cursor:col-resize;" mce_style="cursor:col-resize;" οndblclick="setMinWidthForTd()" οnmοusedοwn="MouseDownResizeTd(this)"><div class="headdiv">电话</div></td> <Td id="resizehead" style="cursor:col-resize;" mce_style="cursor:col-resize;" οndblclick="setMinWidthForTd()" οnmοusedοwn="MouseDownResizeTd(this)"><div class="headdiv">住址</div></td> <Td id="resizehead" style="cursor:col-resize;" mce_style="cursor:col-resize;" οndblclick="setMinWidthForTd()" οnmοusedοwn="MouseDownResizeTd(this)"><div class="headdiv">政治面貌</div></td> <Td id="resizehead" style="cursor:col-resize;" mce_style="cursor:col-resize;" οndblclick="setMinWidthForTd()" οnmοusedοwn="MouseDownResizeTd(this)"><div class="headdiv">学历</div></td> <Td id="resizehead" style="cursor:col-resize;" mce_style="cursor:col-resize;" οndblclick="setMinWidthForTd()" οnmοusedοwn="MouseDownResizeTd(this)"><div class="headdiv">备注</div></td> </tr> </thead> <mce: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); } // --></mce:script> </table> </BODY> </HTML>