javascript学习笔记—表格的动态添加、删除，表格排序

最新推荐文章于 2024-06-06 01:46:25 发布

续写经典

最新推荐文章于 2024-06-06 01:46:25 发布

阅读量2.7k

点赞数 5

分类专栏： javaScript javascript入门文章标签： javascript function date 文档 button xhtml

本文链接：https://blog.csdn.net/qy1387/article/details/7837135

版权

javaScript 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

javascript入门

20 篇文章 349 订阅

订阅专栏

本篇功能不完善，请点击另一篇文章：javascript表格操作大全


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格排序</title>
	<script type="text/javascript"> 
		//添加一行数据
		function addRow(){ 
			var newRow = tab.insertRow(tab.rows.length); //添加一行
			var countCell=tab.rows.item(0).cells.length; //获得指定行的列的长度
			for(var i=0;i<countCell;i++){
				var r = prompt("请输入第"+(i+1)+"列的值：","");
				if(r != null){
					var newCell = newRow.insertCell(i);
					newCell.innerHTML = r;
				}
			}
		} 
		//删除一行数据
		function deleteRow(){
			var n = prompt("请输入要删除行的下标","");
			if(n != null){
				tab.deleteRow(n); //删除指定的一行
			}
		}
		//转换数据类型,v为值，dataType为数据类型
		function convert(v,dataType){
			switch(dataType){
				case "int":
					return parseInt(v);
				case "date":
					return new Date(Date.parse(v));
				default:
					return v.toString();
			}
		}
		//排序函数,index为索引，type为数据类型
		function pai(index,dataType){
			return function compare(a,b){
				//var str1 = convert(a.cells[index].firstChild.nodeValue,dataType);
				//var str2 = convert(b.cells[index].firstChild.nodeValue,dataType);
				var str1 = convert(a.cells[index].innerHTML,dataType); //两种方法效果一样
				var str2 = convert(b.cells[index].innerHTML,dataType);
				if(str1 < str2){
					return -1;
				}else if(str1 > str2){
					return 1;
				}else{ 
					return 0;
				}
			};
		}
		//排序的过程
		function sortTable(tableID,index,dataType){
			var tab = document.getElementById(tableID); //获取表格的ID
			var td = tab.tBodies[0]; //获取表格的tbody
			var newRows = td.rows;   //获取tbody里的所有行
			var arr = new Array();   //定义arr数组用于存放tbody里的行
			//用循环将所有列放入数组
			for(var i=0;i<newRows.length;i++){
				arr[i] = newRows[i];
			}
			//判断最后一次排序的列是否与现在要进行排序的列相同，如果是就反序排列
			if(tab.sortCol == index){
				arr.reverse();
			}else{ 
				//使用数组的sort方法，传进排序函数
				arr.sort(pai(index,dataType));
			}
			var oFragment = document.createDocumentFragment(); //创建文档碎片
            for (var i=0; i < arr.length; i++) {  //把排序过的aTRs数组成员依次添加到文档碎片
                oFragment.appendChild(arr[i]);
            }
            td.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新
            tab.sortCol = index;  //记录最后一次排序的列索引
		}
	</script>
</head>

<body> 
	<input type="button" value="添加数据" onClick="addRow()" />     
	<input type="button" value="删除数据" onClick="deleteRow()" />
	<table id="tab" border=1>
		<thead>  <!--以下数据，纯属瞎掰，无需在意-->
		<tr>
			<th onClick="sortTable('tab',0,'int')" style="cursor:pointer">ID</th>
			<th onClick="sortTable('tab',1)" style="cursor:pointer">姓名</th>
			<th onClick="sortTable('tab',2,'int')" style="cursor:pointer">年龄</th>
			<th onClick="sortTable('tab',3,'date')" style="cursor:pointer">出生日期</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td width=100 id="ID">1</td>
			<td id="name" width="100">ss</td>
			<td id="age" width="100">25</td>
			<td id="date" width="100">1970/09/09</td>
		</tr>
		<tr>
			<td width=100 id="ID">3</td>
			<td id="name" width="100">mm</td>
			<td id="age" width="100">18</td>
			<td id="date" width="100">1980/09/09</td>
		</tr>
		<tr>
			<td width=100 id="ID">2</td>
			<td id="name" width="100">jj</td>
			<td id="age" width="100">19</td>
			<td id="date" width="100">1990/09/09</td>
		</tr>
		<tr>
			<td width=100 id="ID">6</td>
			<td id="name" width="100">gg</td>
			<td id="age" width="100">22</td>
			<td id="date" width="100">1965/09/09</td>
		</tr>
		<tr>
			<td width=100 id="ID">5</td>
			<td id="name" width="100">ff</td>
			<td id="age" width="100">30</td>
			<td id="date" width="100">1950/09/09</td>
		</tr>
		</tbody>
	</table>
	
</body> 
</html>

<!--函数分析

document.createDocumentFragment()说白了就是为了节约使用DOM。
每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，
从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，
然后把文档碎片的内容一次性添加到document中.

appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)
insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)

表格的ID.cells[索引].firstChild.nodeValue   可以获得表格中的值
表格的ID.cells[索引].innerHTML  效果同上

style="cursor:pointer" 把鼠标指针切换为手指

var arr = ["中","华","人","民","共","和","国"]; 
alert(arr.sort(function(a,b){return a.localeCompare(b)}));//结果为：共,国,和,华,民,人,中(拼音升序)	
-->