javascript 表格排序，支持中英文

guoguo19811025 2007-04-01 04:09:11
如下表格点击表头，进行相应排序，请给相应代码，最好不要是连接，谢谢
<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>
...全文
328 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
adverse 2007-04-01
  • 打赏
  • 举报
 回复
<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>
看看是不是这样
mingxuan3000 2007-04-01
  • 打赏
  • 举报
 回复
<!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>

js表格排序、支持中文、日期、英文、数值排序
收集起来js表格排序、支持中文、日期、英文、数值排序，多个Javascript表格排序方法，完美解决
JavaScript表格排序，点击表头即可排序
内容索引:脚本资源,Ajax/JavaScript,表格排序,表头　JavaScript表格排序，点击表头即可排序，此脚本支持中文汉字排序、中英文混合排序、数据大小排序、文件名称类型排序、日期排序、价格排序、中文和数字排序;...
Table表格排序显示jQuery代码
"Table表格排序显示jQuery代码"是一个实用的工具，它允许用户通过简单的点击表头来实现表格数据的多维度排序，包括分类排序、数字大小排序以及英文排序等。这个功能极大地提升了用户体验，使得大量数据的浏览和分析...
javascript多种数据类型表格排序代码分析
整体而言，这篇文档分析了如何在不依赖任何外部库的情况下使用原生JavaScript来实现一个高效、支持多种数据类型排序的表格排序功能，并提供了详细的使用方法和代码实现。这对于前端开发者来说，是理解和掌握客户端...
原生js sortTable对表格进行排列顺序表格递增顺序排列
- **国际化支持**：对于非英文字符，排序规则可能会有所不同，需要适配不同的语言环境。 在项目`texiao8167_1560681035`中，可能包含了示例代码或者更复杂的`sortTable`实现，具体细节需要查看源代码才能了解。不过...
JavaScript

87,997

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章