js 实现表格数字排序

stoneprogramme 2010-12-06 11:42:48
如何用js实现表格内数字排序，点击表头可实现升序或降序排列。在网上搜了很长时间，看不懂，网上的有字符串和数字混排，太乱了。我现在只要数字排序，最好能有注释，简单点。谢谢各位了！！！
...全文
489 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
yajun_snow 2010-12-31
  • 打赏
  • 举报
 回复
http://developer.yahoo.com/yui/examples/datatable/dt_basic.html
lowechenwen 2010-12-06
  • 打赏
  • 举报
 回复
能力有限，不知满足要求不？


   <script type="text/javascript">

        function intSort() {

            var t1 = document.getElementById("t1");

            var trs = t1.getElementsByTagName("tr");

            //将第一列的所有单元格值合并成数组

            var sorttmp = "";

            for (var i = 1; i < trs.length; i++) {

                sorttmp += "," + t1.rows[i].cells[0].innerText;

            }

            sorttmp = t1.rows[0].cells[0].innerText + sorttmp;

            var sort = sorttmp.split(",");

            //冒泡排序 

            var tmp = 0;

            var isOK = false;

            while (!isOK) {

                isOK = true;

                for (var i = 0; i < sort.length - 1; i++) {

                    if (parseInt(sort[i]) > parseInt(sort[i + 1])) {//parseInt是关键，否则是string

                        tmp = parseInt(sort[i]);

                        sort[i] = parseInt(sort[i + 1]);

                        sort[i + 1] = tmp;

                        isOK = false;

                    }

                }

            }

            for (var i = 0; i < trs.length - 1; i++) {

                t1.rows[i].cells[0].innerText = sort[i];

            }

        }



    </script>



</head>

<body>

    <table id="t1" border="1">

        <tr>

            <td>45</td>

            <td></td>

        </tr>

        <tr>

            <td>264</td>

            <td></td>

        </tr>

        <tr>

            <td>234</td>

            <td></td>

        </tr>

        <tr>

            <td>17</td>

            <td></td>

        </tr>

        <tr>

            <td>31</td>

            <td></td>

        </tr>

        <tr>

            <td>77</td>

            <td></td>

        </tr>

        <tr>

            <td>89</td>

            <td></td>

        </tr>

        <tr>

            <td>99</td>

            <td></td>

        </tr>

        <tr>

            <td>65</td>

            <td></td>

        </tr>

        <tr>

            <td>312</td>

            <td></td>

        </tr>

        <tr>

            <td>

                <input type="button" value="数字排序" onclick="intSort()" /></td>

            <td>

                <input type="button" value="字母排序" /></td>

        </tr>

    </table>
flyerwing 2010-12-06
  • 打赏
  • 举报
 回复
array.sort(function(a1,a2){return a1>a2?1:-1;});//从小到大排序.
cloudgamer 2010-12-06
  • 打赏
  • 举报
 回复
可以试试这个table排序
把type设为"int"就是按数字大小排序
lowechenwen 2010-12-06
  • 打赏
  • 举报
 回复
晕，写错了，4L
lowechenwen 2010-12-06
  • 打赏
  • 举报
 回复
1L方法大好
jz_freeman 2010-12-06
  • 打赏
  • 举报
 回复
function sort(tableId, sortColumn,nodeType) {


var table = document.getElementById(tableId);

var tableBody = table.tBodies[0];
var tableRows = tableBody.rows;


var rowArray = new Array();
for (var i = 0; i < tableRows.length; i++) {
rowArray[i] = tableRows[i];
}
if (table.sortColumn == sortColumn) {

rowArray.reverse();
} else {
rowArray.sort(generateCompareTR(sortColumn, nodeType));
}
var tbodyFragment = document.createDocumentFragment();
for (var i = 0; i < rowArray.length; i++) {
tbodyFragment.appendChild(rowArray[i]);
}
tableBody.appendChild(tbodyFragment);
table.sortColumn = sortColumn;
}


function generateCompareTR(sortColumn, nodeType) {
return function compareTR(trLeft, trRight) {
var leftValue = convert(trLeft.cells[sortColumn].firstChild.nodeValue, nodeType);
var rightValue = convert(trRight.cells[sortColumn].firstChild.nodeValue, nodeType);
if (leftValue < rightValue) {
return -1;
} else {
if (leftValue > rightValue) {
return 1;
} else {
return 0;
}
}
};
}


function convert(value, dataType) {
switch (dataType) {
case "int":
return parseInt(value);
case "float":
return parseFloat(value);
case "date":
return new Date(Date.parse(value));
default:
return value.toString();
}
}

上面的是js方法 然后给表头添加onclick事件 onclick="sort('table2',2,'float')" 其中 table2为该表头所在的table id，2 为要排序的字段是table的第几个字段，float为数据类型
licip 2010-12-06
  • 打赏
  • 举报
 回复
<!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="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function orderasc(flag){
var tbody = document.getElementById("tbodyid");
var trs = tbody.children;
for(var i = 0;i<trs.length-1;i++){
for(var j=0;j<trs.length-i-1;j++){
var tr1 = trs[j];
var tr2 = trs[j+1];
var td1i = parseInt(tr1.children[0].innerHTML,10);
var td2i = parseInt(tr2.children[0].innerHTML,10);

if(flag==0){
if(td1i > td2i){
tbody.insertBefore(tr2,tr1);
}
}else{
if(td1i < td2i){
tbody.insertBefore(tr2,tr1);
}
}
}
}
}

//-->
</SCRIPT>
</HEAD>

<BODY>
<TABLE border="1" id="tabid">
<TR>
<Th>编号<font onclick="orderasc(0)">升</font><font onclick="orderasc(1)">降</font></Th>
<Th>名称</Th>
</TR>
<tbody id="tbodyid">
<TR>
<TD>1</TD>
<TD>xm</TD>
</TR>
<TR>
<TD>10</TD>
<TD>qhit</TD>
</TR>
<TR>
<TD>5</TD>
<TD>xmqhit</TD>
</TR>
</tbody>
</TABLE>
</BODY>
</HTML>
JavaScript实现表格排序
JavaScript实现表格排序，按数字、日期、汉字排序！
web开发js实现的表格排序功能
web开发js实现的表格排序功能，web开发js实现的表格排序功能，web开发js实现的表格排序功能
WPS JS宏从入门到放弃（JSA/JS宏编程教程）
适合人群：零基础学习，希望使用编程来批量处理Excel数据 希望使用WPS编程来处理Excel数据 希望使用比VBA更简洁的编程语言来处理Excel数据 办公环境只有WPS，但又希望有像VBA一样的编程功能你将会学到：使用WPS中的JS宏代码，快速简洁的批量处理Excel和WPS 表格数据。课程简介：第01章 WPS表格基础与JS宏基础（已完成）第02章 JS宏循环语句应用（已完成）第03章 WPS表格常用对象应用（已完成）第04章 自定义函数（已完成）第05章 WPS JS宏数组技术（已完成）第06章 WPS JS宏集合技术（已完成）第07章 WPS JS宏映射技术-Map（已完成）第08章 WPS JS宏对象应用（已完成）第09章 JS宏正则表达式（已完成）第10章 工作簿与程序应用事件（已完成）第10章 JS宏窗体控件 （已完成） 
原生js table表格自动排序效果
分享一款原生js table表格自动排序效果，个人感觉很好用
Js特效 表格分页排序
1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序； 2. 实现当前排序列高亮显示； 3. 实现表格奇偶行不同颜色，即换行变色； 4. 实现表格分页功能，可指定是否开启分页功能及每页行数； 5. 排序数据支持数据类型自动识别（这点很强大）。例如：整型数据、浮点型数据、字母、电话号码、日期、链接 6. 表格外观样式可通过CSS灵活定制 7. 所需要引用的js文件非常小巧，压缩版仅2.5k 8. 使用非常简单，可进行参数配置 1. 该功能在浏览器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下测试通过。 2. 排序数据不支持中文数据，这是一个缺陷
JavaScript

87,922

社区成员

224,618

社区内容

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

加载中

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

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

+ 用AI写文章