<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
margin:0;
padding:0;
background:#f1f1f1;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:150%;
text-align:left;
}
table,td{
font:100% Arial, Helvetica, sans-serif;
}
table{
width:800px;
border-collapse:collapse;
margin:1em auto;
}th,td{
  
text-align:left;
padding:.5em;
border:1px solid #fff;
}th{
width:200px;
text-align:center;
background:#328aa4 repeat-x;
color:#fff;
cursor:pointer;
}td{
background:#e5f1f4;
}
.hiddenLongchar{
width:200px;
white-space:nowrap;
overflow:hidden;
*text-overflow:ellipsis;}
.resizeDiv{
background:#00ff00;
width:18px;
z-index:999;
position:relative;
float:right;
left:15px;
cursor:e-resize;
height:100%;
}</style>
</head><body>
<table  id="sortTable" cellspacing="0" cellpadding="0">
  <tr>
    <th   ><span class="resizeDiv">&nbsp;</span>数字</th>
    <th   ><span class="resizeDiv">&nbsp;</span>英文</th>
    <th id='hanzi'  ><span class="resizeDiv">&nbsp;</span>汉字</th>
    <th   ><span class="resizeDiv">&nbsp;</span>标题</th>
  </tr>
  <tr>
    <td>01</td>
    <td ><div class='hiddenLongchar'>dddd dddd ddd ddd ddd ddd ddd ddd ddd ddd ddd ddss </div></td>
    <td>半</td>
    <td>da9</td>
  </tr>
  <tr>
    <td>32</td>
    <td>z</td>
    <td>啊</td>
    <td>da2</td>
  </tr>
  <tr>
    <td>08</td>
    <td>c</td>
    <td>带</td>
    <td>da8</td>
  </tr>
  <tr>
    <td>04</td>
    <td>a</td>
    <td>猜</td>
    <td>da4</td>
  </tr>
</table>
<script>
var sortTable=document.getElementById("sortTable");//改变当前单元格行列颜色
function change(e,bcolor)
{
e=e||event;
var target=e.target||e.srcElement;
if(target.tagName.toLowerCase()=='td')
{
for(var i=1;i<sortTable.rows.length;i++)
{
sortTable.rows[i].cells[target.cellIndex].style.background=bcolor;
}

var cells=target.parentNode.cells;
for(var j=0;j<cells.length;j++)
{
cells[j].style.background=bcolor;
}
}}sortTable.onmouseover=function(e){
change(e,"#bce774");
}
sortTable.onmouseout=function(e){
change(e,"#e5f1f4");
}

//为数组添加xsort排序方法
Array.prototype.xsort=function(sType,bDirect){
switch(sType){
case 1:this.sort(function(a,b){return a.localeCompare(b)});break;
default:this.sort();
}
if(bDirect==undefined)bDirect=1;
if(!bDirect)this.reverse;
}
//排序函数
function ksort(obj,type){
var tr=obj.parentNode;
var list=[];
//获取单元格数据
while(tr.nextSibling){
tr=tr.nextSibling;
if(tr.nodeType==1){
list.push(tr.cells[obj.cellIndex].innerHTML);
}
}


//排序数据
list.xsort(type,obj.direct);
for(var i=0;i<list.length;i++){
sortTable.rows[i+1].cells[obj.cellIndex].innerHTML=list[i];
}
}
//排序执行
sortTable.onclick=function(e){
var type;
e=e||event;
var target=e.target||e.srcElement;
type=target.id?1:0;
if(target.tagName.toLowerCase()=='th'){
ksort(target,type);
}
}
//拖动表格列
function dragTr(obj){

obj.onmousedown=function(e){
e=e||event; 
this.mouseX=e.clientX;
this.thW=this.parentNode.offsetWidth;
if(this.setCapture)this.setCapture();

document.onmouseover=function(e){
if(!obj.mouseX)return;
e=e||event;
 
 obj.parentNode.style.width=obj.thW+e.clientX-obj.mouseX+'px';
  
}
document.onmouseup=function(e){
e=e||event;
if(obj.releaseCapture)
{
obj.releaseCapture();
}
obj.mouseX=0;

}
}}
//表格拖动执行
var resizeDiv=sortTable.getElementsByTagName("span");
for(var y=0;y<resizeDiv.length;y++)
{
dragTr(resizeDiv[y]);
resizeDiv[y].tagName;
}
</script>
</body>
</html>还有拖动模块在拖动时候,反应速度很慢,请高手帮忙调试下