jsp+js实现可排序表格

最新推荐文章于 2021-03-31 11:45:09 发布

fxz_2010

最新推荐文章于 2021-03-31 11:45:09 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： JSP CSS Cache JavaScript HTML ViewUI

本文链接：https://blog.youkuaiyun.com/fxz_2010/article/details/83500088

javascript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个简单的JavaScript实现的表格排序功能。通过定义排序方法、比较函数及值转换函数，可以轻松地为HTML表格添加交互式的排序功能。点击表格头部即可按指定列进行升序或降序排列。

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

首先，定义一个js：

/**
 * 排序主方法
 * @param {} tableId
 * @param {} sortColumn
 * @param {} nodeType
 */
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;
}

/**
 * 比较函数
 * @param {} sortColumn
 * @param {} nodeType
 * @return {}
 */
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;
			}
		}
	};
}

/**
 * 值转换
 * @param {} value
 * @param {} dataType
 * @return {}
 */
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();
	}
}

然后是使用：

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'table.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/sort.js"></script>
	

  </head>
  
  <body>
    <table id="theTable" align="center" border="1">  
            <thead>  
                <tr>  
                    <td>  
                        标题1   
                    </td>  
                    <td onclick="sort(theTable,1,'int')" style="cursor: hand;">  
                        标题2   
                    </td>  
                    <td onclick="sort(theTable,2,'int')" style="cursor: hand;">  
                        标题3   
                    </td>  
                    <td onclick="sort(theTable,3,'int')" style="cursor: hand;">   
                        标题4   
                    </td>  
                    <td onclick="sort(theTable,4,'int')" style="cursor: hand;">   
                        标题5   
                    </td>  
                    <td onclick="sort(theTable,5,'int')" style="cursor: hand;">   
                        标题6   
                    </td>  
                    <td onclick="sort(theTable,6,'int')" style="cursor: hand;">    
                        标题7   
                    </td>  
                </tr>  
            </thead>  
            <tbody>  
                <tr>  
                    <td>  
                        1   
                    </td>  
                    <td>  
                        2   
                    </td>  
                    <td>  
                        3   
                    </td>  
                    <td>  
                        4   
                    </td>  
                    <td>  
                        5   
                    </td>  
                    <td>  
                        6   
                    </td>  
                    <td>  
                        7   
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        2   
                    </td>  
                    <td>  
                        3   
                    </td>  
                    <td>  
                        4   
                    </td>  
                    <td>  
                        5   
                    </td>  
                    <td>  
                        6   
                    </td>  
                    <td>  
                        7   
                    </td>  
                    <td>  
                        1   
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        3   
                    </td>  
                    <td>  
                        4   
                    </td>  
                    <td>  
                        5   
                    </td>  
                    <td>  
                        6   
                    </td>  
                    <td>  
                        7   
                    </td>  
                    <td>  
                        1   
                    </td>  
                    <td>  
                        2   
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        4   
                    </td>  
                    <td>  
                        5   
                    </td>  
                    <td>  
                        6   
                    </td>  
                    <td>  
                        7   
                    </td>  
                    <td>  
                        1   
                    </td>  
                    <td>  
                        2   
                    </td>  
                    <td>  
                        3   
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        5   
                    </td>  
                    <td>  
                        6   
                    </td>  
                    <td>  
                        7   
                    </td>  
                    <td>  
                        1   
                    </td>  
                    <td>  
                        2   
                    </td>  
                    <td>  
                        3   
                    </td>  
                    <td>  
                        4   
                    </td>  
                </tr>  
                <tr>  
                    <td>  
                        6   
                    </td>  
                    <td>  
                        7   
                    </td>  
                    <td>  
                        1   
                    </td>  
                    <td>  
                        2   
                    </td>  
                    <td>  
                        3   
                    </td>  
                    <td>  
                        4   
                    </td>  
                    <td>  
                        5   
                    </td>  
                </tr>  
            </tbody>  
        </table>  
    </body>  

</html>