网站建设
  简约型网页设计套餐998
  实惠型网站建设套餐2580
  综合型网站制作套餐4980
  网站改版与网站维护
  行业网站建设方案
  大型网站建设解决方案
  企业网站建设流程
  帝网科技网站设计与网站制作
建站FAQ
·网站空间问题解答
·企业邮箱问题解答
 
酷站欣赏
·房产酷站(379)
·综合门户(8 9)
·建筑装饰(603)
·手机通讯(354)
·生活购物(376)
·医疗保健(199)
·文化摄影(602)
·休闲体育(399)
>>更多酷站欣赏
网站优化
·Google(谷歌)优化   ·百度(BaiDu)优化
·雅虎(Yahoo)优化    ·Alexa排名优化   
·Google AdSense   ·DMOZ目录提交  
建站知识
·网站建设知识·网站名词解释·网站运营知识
·网络营销知识·搜索引擎知识·实用技术文摘
网站推广
百度网站推广 google网站推广
搜狐网站推广 网易网站推广
新浪网站推广   雅虎网站推广
  您当前位置: 当前位置:帝网科技 >> web开发 >> JSP专栏 >> 浏览文章
 
 
jsp+js实现可排序表格
作者:佚名 来源:帝网科技 日期:2009年04月25日 点击数:


  首先,定义一个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.toString();  
    }  
}
 

  然后是使用:

标题1 标题2 标题3 标题4 标题5 标题6 标题7
1 2 3 4 5 6 7
2 3 4 5 6 7 1
3 4 5 6 7 1 2
4 5 6 7 1 2 3
5 6 7 1 2 3 4
6 7 1 2 3 4 5

  之后就可以看到效果了。

  相关文章
 
·如何建立JSP操作以提高数据库访问效率
·servlet 生成静态HTML的方法
·使用JSP实现简易的SQL报表
·浅析Servlet和Jsp中的多国语言显示
·JSP/Servlet/JSF:自定义标签的另类体
·使用JSP+javascript打造二级级联下
·实例:JSP结合XML+XSLT将输出转换HTML
·JSP教程:JSP页面跳转的实战规则
·关于JSP中的offsetparent
·JSP中errorPage设置方法
·JSP用bean获取各种参数
·JSP基础知识教程
·在Eclipse中部署Tomcat,并运行JSP
·jsp教程:深入浅出URL编码
·JSP技术优缺点深入分析(2)
·Jsp环境下ajax乱码问题的解决方法
·JSP技术优缺点深入分析(1)
·jsp上传组件smartupload介绍
·JSP中文字符乱码处理的2种方法
·jsp入门:Jsp运行原理
 
 

公司环境 | 合作伙伴 | 人才招聘 | 付款方式 | 关于我们

地址:广州市天河区中山大道中120号D805 电话:020-82529556 传真:020-82529556
广州帝网网络科技有限公司 版权所有 粤ICP备08119341号