jsp+js实现可排序表格

这篇博客介绍了一个利用JavaScript实现的JSP表格排序功能。通过定义`tableSort.js`函数,实现了根据表格列点击进行升序或降序排序。代码中包括`sort`、`generateCompareTR`和`convert`三个主要函数,处理不同数据类型的排序。示例中展示了如何在HTML表格上应用这些功能,使得用户可以通过点击表格头进行动态排序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

首先,定义一个js:  tableSort.js:

function sort(tableId, sortColumn,nodeType) {  
    var table = document.getElementById("theTable");  
    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.toS

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值