<%@page
language="java"
contentType="text/html;charset=GBK"
%>
<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++)
{ alert(headEventObject.children[i].tagName);
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>