javascript 高级程序设计 读书笔记（4）

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量106 收藏
点赞数
分类专栏： 表格排序 文章标签： javascript java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaw_n_lu/article/details/84440052
版权

      以前学习js，没有意识到原来可以通过操作dom来对html表格进行排序。简单看了下书,关键是数组的一个sort方法传入一个自定义的比较函数，这个有点类似java的Collections.sort方法，然后自己实现一个简单的点击表头字段实现对应列的排序功能。

 

index.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="tableSort.js"></script>
<title>Insert title here</title>
</head>
<body οnlοad="TableUtils.sort('sort-table')">
<table id="sort-table" >
	<thead>
		<tr>
			<th dataType="string">学号</th>
			<th dataType="string">姓名</th>
			<th dataType="number">年龄</th>
			<th dataType="date">出生日期</th>
			<th dataType="other">详细信息</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>31130601</td>
			<td>张三</td>
			<td>22</td>
			<td>1991-03-03</td>
			<td><a href="#">button</a></td>
		</tr>
		<tr>
			<td>31130612</td>
			<td>李四</td>
			<td>24</td>
			<td>1989-04-12</td>
			<td><a href="#">button</a></td>
		</tr>
		<tr>
			<td>31130623</td>
			<td>王五</td>
			<td>21</td>
			<td>1992-04-13</td>
			<td><a href="#">button</a></td>
		</tr>
		<tr>
			<td>31130601</td>
			<td>钱六</td>
			<td>18</td>
			<td>1995-12-01</td>
			<td><a href="#">button</a></td>
		</tr>
	</tbody>
</table>
</body>
</html>

页面比较简单，对于id为sort-table的table在onload事件中注册排序的功能。

核心的js如下：

var TableUtils = new Object();

TableUtils.sort = function(id){
	var tb = document.getElementById(id);
	//获取表头字段
	var ths = tb.tHead.children[0].children;
	//循环表头对每一列根据字段类型分别注册排序功能
	for(var x in ths){
		ths[x].style.cursor = 'pointer';
		//默认为顺序排列
		ths[x].setAttribute("order","ASC");
		ths[x].onclick = function(e){
			var t = 0;
			//获取指定的列对象的序号
			for(var i in ths){
				if(ths[i].innerHTML == e.target.innerHTML){
					t = i;
				}
			}
			var trs = tb.tBodies[0].rows;
			var arr = new Array();
			//将指定列的所有单元格放入数组中
			for(var i=0;i<=trs.length-1;i++){
				arr.push(trs[i].cells[t]);
			}
			//获取字段类型，根据字段类型指定比较方法
			var dataType = e.target.getAttribute("dataType");
			if(dataType == "string"){
				arr.sort(TableUtils.compareString);
			}else if(dataType == "number"){
				arr.sort(TableUtils.compareNumber);
			}else if(dataType == "date"){
				arr.sort(TableUtils.compareDate);
			}
			//获取排序的方式顺序或者降序
			var order = e.target.getAttribute("order");
			if(order == "ASC"){
				//降序则通过reverse方法倒置结果
				arr.reverse();
				e.target.setAttribute("order","DESC");
			}else{
				e.target.setAttribute("order","ASC");
			}
			//创建dom节点集插入到tbody中完成排序
			var frag = document.createDocumentFragment();
			for(var i=0;i<=arr.length-1;i++){
				//插入所有tr节点
				frag.appendChild(arr[i].parentNode);
			}
			tb.tBodies[0].appendChild(frag);
			
		};
		if(x>=(ths.length-1)) break;
	}
};
TableUtils.compareString = function(p1,p2){
	var pV1 = p1.firstChild.nodeValue;
	var pV2 = p2.firstChild.nodeValue;
	return pV1.localeCompare(pV2);
};
TableUtils.compareNumber = function(p1,p2){
	var pV1 = p1.firstChild.nodeValue;
	var pV2 = p2.firstChild.nodeValue;
	if(pV1 > pV2){
		return 1;
	}else if(pV1 == pV2){
		return 0;
	}else{
		return -1;
	}
};
TableUtils.compareDate = function(p1,p2){
	var pV1 = p1.firstChild.nodeValue;
	var pV2 = p2.firstChild.nodeValue;
	var ymd1 = pV1.split("-");
	var ymd2 = pV2.split("-");
	if(ymd1[0] > ymd2[0] || (ymd1[0] == ymd2[0] && ymd1[1] > ymd2[1])
			|| (ymd1[0] == ymd2[0] && ymd1[1] == ymd2[1] && ymd1[2] > ymd2[2])){
		return 1;
	}else if(ymd1[0] == ymd2[0] && ymd1[1] == ymd2[1] && ymd1[2] == ymd2[2]){
		return 0;
	}else{
		return -1;
	}
	
	return -1;
};

具体代码实现，见注释。这样即使在加一列，只要指定了dataType（string,number或者date类型）就可以进行排序了。

 

下面是书上的例子

<html>
    <head>
	<title>Table Sort Example</title>
        <script type="text/javascript">
        
            function convert(sValue, sDataType) {
                switch(sDataType) {
                    case "int":
                        return parseInt(sValue);
                    case "float":
                        return parseFloat(sValue);
                    case "date":
                        return new Date(Date.parse(sValue));
                    default:
                        return sValue.toString();
                
                }
            }
        
            function generateCompareTRs(iCol, sDataType) {
        
                return  function compareTRs(oTR1, oTR2) {
                            var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                            var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
        
                            if (vValue1 < vValue2) {
                                return -1;
                            } else if (vValue1 > vValue2) {
                                return 1;
                            } else {
                                return 0;
                            }
                        };
            }
           
            function sortTable(sTableID, iCol, sDataType) {
                var oTable = document.getElementById(sTableID);
                var oTBody = oTable.tBodies[0];
                var colDataRows = oTBody.rows;
                var aTRs = new Array;
        
                for (var i=0; i < colDataRows.length; i++) {
                    aTRs[i] = colDataRows[i];
                }
        
                if (oTable.sortCol == iCol) {
                    aTRs.reverse();
                } else {
                    aTRs.sort(generateCompareTRs(iCol, sDataType));
                }
        
                var oFragment = document.createDocumentFragment();
                for (var i=0; i < aTRs.length; i++) {
                    oFragment.appendChild(aTRs[i]);
                }
       
                oTBody.appendChild(oFragment);
                oTable.sortCol = iCol;
            }

        </script>
    </head>
    <body>
        <p>Click on the table header to sort in ascending order.</p>
        <table border="1" id="tblSort">
            <thead>
                <tr>
                    <th οnclick="sortTable('tblSort', 0)" 
                        style="cursor:pointer">Last Name</th>
                    <th οnclick="sortTable('tblSort', 1)" 
                        style="cursor:pointer">First Name</th>
                    <th οnclick="sortTable('tblSort', 2, 'date')" 
                        style="cursor:pointer">Birthday</th>
                    <th οnclick="sortTable('tblSort', 3, 'int')" 
                        style="cursor:pointer">Siblings</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                    <td>John</td>
                    <td>7/12/1978</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Johnson</td>
                    <td>Betty</td>
                    <td>10/15/1977</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Henderson</td>
                    <td>Nathan</td>
                    <td>2/25/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Williams</td>
                    <td>James</td>
                    <td>7/8/1980</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>Gilliam</td>
                    <td>Michael</td>
                    <td>7/22/1949</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Walker</td>
                    <td>Matthew</td>
                    <td>1/14/2000</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>        
    </body>
</html>

个人感觉把事件监听也封装到js里比较好，便于扩展，而且也减少html的代码毕竟html是主要负责做展现的不应有太多的逻辑事件处理。

走不走
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript高级程序设计读书笔记--语言基础
m0_44981797的博客
04-12 1283
1.语法 1.1 标识符 标识符，就是变量、函数、属性或函数参数的名称。标识符按照ECMAScript惯例，采用驼峰命名法，由一或多个下列字符组成： 第一个字符必须是一个字母、下划线（_）或美元符号（$）； 剩下的其他字符可以是字母、下划线、美元符号或数字。 1.2 语句 ECMAScript 中的语句以分号结尾。省略分号就意味着由解析器确定语句在哪结尾。加分号有助于防止因为省略造成的问题，也便于开发者通过删除空行来压缩代码（如果没有结尾的分号，只删除空行，则会导致语法错误），同时加分号也有助于在某些情
javascript 高级程序设计 读书笔记（3）
04-19
《JavaScript高级程序设计》是JavaScript开发者的经典教材，它深入探讨了这门语言的核心概念和技术。这篇读书笔记主要聚焦在第三部分，这部分通常涵盖了更高级的主题，如对象、原型、闭包以及模块化等。结合提供的...
JavaScript高级程序设计——读书笔记
淡水瑜的博客
05-03 1589
想要全面理解和掌握JavaScript，关键在于弄清楚它的本质、历史、局限性。ECMAScriptECMAScript（简称ES）是一种用于编写Web浏览器脚本语言的标准，它定义了JavaScript语言的核心规范。它由Ecma International 标准化组织负责管理和更新。JavaScript是ECMAScript标准的一种实现，其他还有JScript和ActionScript等。ECMAScript的目标是提供一种可以跨平台、可靠、高效、强大的脚本语言。
JavaScript高级程序设计读书笔记-1
m0_70033038的博客
06-02 241
JavaScript高级程序设计（第4版）读书笔记
JavaScript高级程序设计读书笔记
qq_45968958的博客
12-01 189
学习目标： JavaScript高级程序设计 学习内容： 什么是JavaScript JavaScript是一门用来与网页交互的脚本语言，包含以下三个组成部分。 1.ECMAScript：由ECMA-262定义并提供核心功能。 2.文档对象模型（DOM）：提供与网页内容交互的方法和接口。 3.浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。 HTML中的JavaScrip script元素 1.在网页中嵌入JavaScript代码 <script> function sayHi
JavaScript高级程序设计读书笔记分享
分享即学习
08-13 355
JavaScript简介 # 文档对象模型DOM 1.为什么要使用DOM 形成统一标准，方便使用 2.基于XML，DOM标准 - SVG（可伸缩矢量图） - MathML（数学标记语言） - SMIL（同步多媒体集成语言） # 浏览器对象模型DOM **Browser Object Model** 从根本上讲，BOM 只处理浏览器窗口和框架；但人们习惯上也吧所...
Javascript高级程序设计读书笔记1
esabeny的博客
01-26 136
1.小结1 1.JavaScript的基本数据类型包括Undefined, Null, Boolean,Number,String 2.与其他语言不同,ECMScript没有整数和浮点数，Number类型可用于表达所有数值 3.不存在重载，函数没有返回值，返回值为undefined 4.我们不能给基本类型添加属性 5.一个变量向另一个变量复制基本类型的值，会在变量对象上新创建一个新值，然后把该值复制到为新变量分配的位置上 6.当一个变量向另一个变量复制引用类型的值时，同样会将存储在变量对象中的值复制一份放到
《JavaScript高级程序设计》读书笔记
mirror_Mx的博客
01-02 224
面向对象的程序设计 面向对象的语言都有一个标志，那就是它们都有类的概念，但ECMAScript中没有类的概念，ECMA-262中把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数”。 每个对象都是基于引用类型创建的，引用类型可以是原生类型，也可以是开发者定义的类型。 理解对象 最简单的创建自定义对象的方法（创建一个object实例），然后再为它添加属性和方法。 var perso...
《JavaScript 高级程序设计》 读书笔记 3 语法
SharkMarine的专栏
05-09 280
《JavaScript高级程序设计》百度王牌下载链接: https://pan.baidu.com/s/18rtBTMyDWLWrgr0bnCXTbg 提取码: 3ibu 1、慎用浮点数做判断 浮点数值的高精度是 17位小数，但在进行算术计算时其精确度远远不如整数。例如，0.1加 0.2 的结果不是 0.3，而是 0.30000000000000004。这个小小的舍入误差会导致无法测试特定的...
javascript高级程序设计读书笔记——事件总结
yinkaihui的博客
08-16 1846
第13章 事件 1.1 事件冒泡     事件开始的时候从最具体的元素接收，然后逐级向上传播到较为不具体的节点。 1.2 事件捕获     事件捕获与冒泡相反，首先由不具体的节点接收，最后是最具体的节点接收事件。     注意： ie的事件流是事件冒泡。由于老版本的浏览器不支持事件捕获，因此更加建议使用事件冒泡，有特殊需要的时候在使用事件捕获。 1.3 DOM事件流     D
JavaScript高级程序设计读书笔记(持续更新)
Chaney__Chen的博客
11-30 443
第四章.变量、作用域和内存问题4.1基本类型和引用类型的值 基本类型值指的是简单的数据段，而引用类型值指那些可能有多个值构成的对象，注意是对象； 以下两段代码说明了只能给引用类型值动态地添加属性，以便将来使用。 var person = new Object(); person.name = "Chaney"; alert(person.name); //Chaney//错误的对比演示 var
JavaScript高级程序设计 读书笔记之八 Function类及闭包
12-11
JavaScript中的Function类是一种特殊的数据类型，它可以用来动态创建或表示任何开发者定义的函数。通过`new Function()`构造函数，我们可以传递参数列表和函数体来创建一个新的函数。例如，`var sayHi = new ...
JavaScript高级程序设计 读书笔记之十一 内置对象Global
12-11
内置对象 定义：由ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现。 由定义可知开发者不必明确实例化内置对象，它已被实例化了。在ECMAScript-262只定义了两个内置对象，即Global...
JavaScript高级程序设计 读书笔记之九 本地对象Array
12-03
这篇读书笔记主要涵盖了Array对象的创建、几个核心的方法以及它们在实际编程中的应用。 首先，创建Array对象有多种方式。第一种是通过`new Array()`，如`var aValues = new Array();`，这将创建一个空数组。第二种...
Vue双向绑定
m0_56131422的博客
09-01 709
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1417
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 441
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2570
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 525
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
JavaScript高级程序设计读书笔记：原始值与引用值解析
"javascript读书笔记1，涵盖了ECMAScript变量声明、变量值的存储方式以及原始类型与引用类型的区别。" 在深入理解JavaScript编程时，了解变量的声明与作用至关重要。根据描述，当JavaScript（ECMAScript）的解释器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值