首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript 表格排序,支持中英文,该怎么解决

2012-02-22 
javascript 表格排序,支持中英文如下表格点击表头,进行相应排序,请给相应代码,最好不要是连接,谢谢tableb

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>
看看是不是这样

热点排行
Bad Request.