javascript 表格排序,支持中英文
如下表格点击表头,进行相应排序,请给相应代码,最好不要是连接,谢谢
<table border= "1 " id= "tblSort ">
<tr>
<th onclick= "sortTable( 'tblSort ', 0) "
style= "cursor:pointer "> Last Name </th>
<th onclick= "sortTable( 'tblSort ', 1) "
style= "cursor:pointer "> First Name </th>
<th onclick= "sortTable( 'tblSort ', 2, 'date ') "
style= "cursor:pointer "> Birthday </th>
<th onclick= "sortTable( 'tblSort ', 3, 'int ') "
style= "cursor:pointer "> Siblings </th>
<th onclick= "sortTable( 'tblSort ', 4) "
style= "cursor:pointer "> 城市 </th>
</tr>
<tr>
<td> Smith </td>
<td> John </td>
<td> 7/12/1978 </td>
<td> 2 </td>
<td> 山东 </td>
</tr>
<tr>
<td> Johnson </td>
<td> Betty </td>
<td> 10/15/1977 </td>
<td> 4 </td>
<td> 江苏 </td>
</tr>
<tr>
<td> Henderson </td>
<td> Nathan </td>
<td> 2/25/1949 </td>
<td> 1 </td>
<td> 上海 </td>
</tr>
<tr>
<td> Williams </td>
<td> James </td>
<td> 7/8/1980 </td>
<td> 4 </td>
<td> 山东 </td>
</tr>
<tr>
<td> Gilliam </td>
<td> Michael </td>
<td> 7/22/1949 </td>
<td> 1 </td>
<td> 浙江 </td>
</tr>
<tr>
<td> Walker </td>
<td> Matthew </td>
<td> 1/14/2000 </td>
<td> 3 </td>
<td> 四川 </td>
</tr>
</table>
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
</HEAD>
<BODY>
<script language=javascript>
String.prototype.isTime = function()
{
var r = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
if(r==null)return false; var d = new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
}
//alert( "2002-1-31 12:34:43 ".isTime());
//alert( "2001-2-26 12:54:38 ".isTime());
//alert( "2001-2-26 12:54:78 ".isTime());
//alert( "2002-1-41 12:00:21 ".isTime());
</script>
<table border= "1 " id= "test ">
<tbody>
<tr onclick= 'if(event.srcElement!=this)tableSort(event.srcElement) '>
<th
style= "cursor:pointer "> Last Name </th>
<th
style= "cursor:pointer "> First Name </th>
<th
style= "cursor:pointer "> Birthday </th>
<th
style= "cursor:pointer "> Siblings </th>
<th
style= "cursor:pointer "> 城市 </th>
</tr>
</tbody>
<tbody>
<tr>
<td> Smith </td>
<td> John </td>
<td> 7/12/1978 </td>
<td> 2 </td>
<td> 山东 </td>
</tr>
<tr>
<td> Johnson </td>
<td> Betty </td>
<td> 10/15/1977 </td>
<td> 4 </td>
<td> 江苏 </td>
</tr>
<tr>
<td> Henderson </td>
<td> Nathan </td>
<td> 2/25/1949 </td>
<td> 1 </td>
<td> 上海 </td>
</tr>
<tr>
<td> Williams </td>
<td> James </td>
<td> 7/8/1980 </td>
<td> 4 </td>
<td> 山东 </td>
</tr>
<tr>
<td> Gilliam </td>
<td> Michael </td>
<td> 7/22/1949 </td>
<td> 1 </td>
<td> 浙江 </td>
</tr>
<tr>
<td> Walker </td>
<td> Matthew </td>
<td> 1/14/2000 </td>
<td> 3 </td>
<td> 四川 </td>
</tr>
</tbody>
</table>
<script>
ary = [];
oTR = test.childNodes[1].childNodes;
oTRorder = test.firstChild.firstChild.childNodes;
for(i=0, j=oTR.length; i <j; i++)
ary[i] = oTR[i];
for(i=0, j=oTRorder.length; i <j; i++)
oTRorder[i].order = -1;
function tableSort(SortNode){
var time = new Date()
var tempa, tempb, oTD, orders
oTD = SortNode.sourceIndex-SortNode.parentElement.sourceIndex-1;
orders = SortNode.order = -SortNode.order;
ary.sort(
function(a,b){
tempa = a.childNodes[oTD].innerText;
tempb = b.childNodes[oTD].innerText;
return tempa <tempb?-orders:tempa==tempb?0:orders;
}
)
for(i=0; i <oTR.length; i++)
oTR[i].swapNode(ary[i]);//swap TR nodes
window.status=new Date()-time;
}
</script>
</BODY>
</HTML>
[解决办法]
<html>
<head>
<SCRIPT>
function sortTable(tb, colum)
{
var sortArray = new Array();
var rowArray = new Array();
var tbrows = document.all(tb).rows;
for (var i = 1; i < tbrows.length; i++)
{
sortArray.push(tbrows(i).cells(colum).innerText + i);
rowArray[tbrows(i).cells(colum).innerText + i] = tbrows(i);
}
sortArray = sortArray.sort();
for (var i = 0; i < sortArray.length; i++)
{
if (document.all(tb).rows[i+1] != rowArray[sortArray[i]])
{
document.all(tb).rows[i+1].swapNode(rowArray[sortArray[i]]);
}
}
}
</SCRIPT>
</head>
<body onload= " ">
<form>
<table border= "1 " id= "tblSort ">
<tr>
<th onclick= "sortTable( 'tblSort ', 0) "
style= "cursor:pointer "> Last Name </th>
<th onclick= "sortTable( 'tblSort ', 1) "
style= "cursor:pointer "> First Name </th>
<th onclick= "sortTable( 'tblSort ', 2, 'date ') "
style= "cursor:pointer "> Birthday </th>
<th onclick= "sortTable( 'tblSort ', 3, 'int ') "
style= "cursor:pointer "> Siblings </th>
<th onclick= "sortTable( 'tblSort ', 4) "
style= "cursor:pointer "> 城市 </th>
</tr>
<tr>
<td> Smith </td>
<td> John </td>
<td> 7/12/1978 </td>
<td> 2 </td>
<td> 山东 </td>
</tr>
<tr>
<td> Johnson </td>
<td> Betty </td>
<td> 10/15/1977 </td>
<td> 4 </td>
<td> 江苏 </td>
</tr>
<tr>
<td> Henderson </td>
<td> Nathan </td>
<td> 2/25/1949 </td>
<td> 1 </td>
<td> 上海 </td>
</tr>
<tr>
<td> Williams </td>
<td> James </td>
<td> 7/8/1980 </td>
<td> 4 </td>
<td> 山东 </td>
</tr>
<tr>
<td> Gilliam </td>
<td> Michael </td>
<td> 7/22/1949 </td>
<td> 1 </td>
<td> 浙江 </td>
</tr>
<tr>
<td> Walker </td>
<td> Matthew </td>
<td> 1/14/2000 </td>
<td> 3 </td>
<td> 四川 </td>
</tr>
</table>
</form>
</body>
</html>
看看是不是这样