<html>
<head>
    <title>MyHtml.html</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->   <script  language="javascript">function   JM_PowerList(colNum)   
  {   
  headEventObject=event.srcElement;//取得引发事件的对象   
  while(headEventObject.tagName!="TR")   //不是tr行,则从底下的td冒泡上来寻找到相应行   
  {   
  headEventObject=headEventObject.parentElement;   
  }   
    
  for   (i=0;i<headEventObject.children.length;i++)   
  {   
  if   (headEventObject.children[i]!=event.srcElement)//找到事件发生的td单元格   
  {   
  headEventObject.children[i].className='listTableHead';//把点击的列的className属性设为listTableHead   
  }   
  }   
    
  var   tableRows=0;   
  trObject=clearStart.children[0].children;   //取得表格中行对象,   原来这里叫DataTable,   可能是你写错了吧??   
  for   (i=0;i<trObject.length;i++)   
  {   
  Object=clearStart.children[0].children[i];//取得每行的对象   
  tableRows=(trObject[i].id=='ignore')?tableRows:tableRows+1;//如果不是忽略行,则行数加一   
  }   
    
  var   trinnerHTML=new   Array(tableRows);     
  var   tdinnerHTML=new   Array(tableRows);   
  var   tdNumber=new   Array(tableRows)   
  var   i0=0   
  var   i1=0   
  for   (i=0;i<trObject.length;i++)   
  {   
  if   (trObject[i].id!='ignore')   
  {   
  trinnerHTML[i0]=trObject[i].innerHTML;//把行放在数组里   
  tdinnerHTML[i0]=trObject[i].children[colNum].innerHTML;//把要排序的行中td的内容放数组里   
  tdNumber[i0]=i;//行号   
  i0++;//加一,下个循环用   
  }   
  }   
  sourceHTML=clearStart.children[0].outerHTML;//取得表格中所有tr的html代码   
    
  //对所有td中的字符串进行排序,   算不算冒泡排序???   
  for   (bi=0;bi<tableRows;bi++)   
  {   
  for   (i=0;i<tableRows;i++)   
  {   
  if(tdinnerHTML[i]>tdinnerHTML[i+1])   
  {   
  t_s=tdNumber[i+1];   
  t_b=tdNumber[i];   
  tdNumber[i+1]=t_b;   
  tdNumber[i]=t_s;   
  temp_small=tdinnerHTML[i+1];   
  temp_big=tdinnerHTML[i];   
  tdinnerHTML[i+1]=temp_big;   
  tdinnerHTML[i]=temp_small;   
  }   
  }   
  }   
    
    
    
  var   showshow='';   
  var   numshow='';   
  for   (i=0;i<tableRows;i++)   
  {   
  showshow=showshow+tdinnerHTML[i]+' ';//把排序好的td的内容存在showshow字串里   
  numshow=numshow+tdNumber[i]+'|';             //把排序好的相应的行号也存在numshow中   
  }   
    
  sourceHTML_head=sourceHTML.split("<TBODY>");//从<TBODY>截断,我试了,前头串为空   
    
  numshow=numshow.split("|");   
  var   trRebuildHTML='';   
  if   (event.srcElement.className=='listHeadClicked')   
  {//已点击的列,   则逆排   
  for   (i=0;i<tableRows;i++)   
  {   
  trRebuildHTML=trRebuildHTML+trObject[numshow[tableRows-1-i]].outerHTML;//取出排序好的tr的内容连接起来   
    
  }   
  event.srcElement.className='listHeadClicked0';   
  }   
  else   
  {//默认顺排,新点击顺排   
  for   (i=0;i<tableRows;i++)   
  {   
  trRebuildHTML=trRebuildHTML+trObject[numshow[i]].outerHTML;   
  }   
  event.srcElement.className='listHeadClicked';   
  }   
  //取得排序后的tr集合结果字符串   
  var   DataRebuildTable='';   
  //把旧的表格头和新的tr排序好的元素连接起来,   (修改了一下)   
  DataRebuildTable   =   "<table   border=1 width=100%  cellpadding=1 cellspacing=1 id='clearStart'><TBODY>" 
      +   trObject[0].outerHTML   +   trRebuildHTML   +   "</TBODY>"   +      "</table>";   
  clearStart.outerHTML=DataRebuildTable;//表格用新串重新写一次   
    
  }   </script>  </head>
<table border=1 id="clearStart">
 <tr bgcolor=cccccc id='ignore'>
  <td onclick="JM_PowerList(0)">列一
  </td>
  <td onclick="JM_PowerList(1)">
   列二
  </td>
  <td onclick="JM_PowerList(2)">
   列二
  </td>
 </tr>
  <tr>
  <td>
   周
  </td>
  <td>
   公务员
  </td>
  <td>
   22
  </td>
 </tr>
 <tr>
  <td>
   张三
  </td>
  <td>
   研究员
  </td>
  <td>
   65
  </td>
 </tr>
 <tr>
  <td>
   李思
  </td>
  <td>
   科学家
  </td>
  <td>
   24
  </td>
 </tr>
 <tr>
  <td>
  王武
  </td>
  <td>
   社会学家
  </td>
  <td>
   38
  </td>
 </tr>
</table>
</body></html>