Javascript_12_DOM_表格排序

黄舟原创: 2017-01-18 16:47:35 642浏览

Javascript_12_DOM_表格排序

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>DOM_表格练习</title>
    <style type="text/css">
    a:link,a:visited{
        color: blue;
        text-decoration: none;
    }
    a:hover{
        color: red;
    }
    table{
    	color:white;
    	font-weight: bold;
        border: #008FF0 dashed 1px;
    }
    table th{
        border: #008FF0 dashed 1px;
        background-color: grey;
    }
    table td{
        border: #008FF0 dashed 1px;
    }
    .odd{
    	background-color: #C7EDCC;
    	color: black;
    }
    .even{
    	background-color: #800080;
    }
    .mouse_over{
    	background-color: red;
    }
    </style>
    </head>
    <body>
    <h1>DOM_表格练习</h1>
    <script type="text/javascript" src="a.js">    </script>
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：全选按钮，商品算金额
     */
    <script type="text/javascript">
    	function chooseAll(oCheckbox){
    		//将参数的checked状态赋值给所有的checkbox
    		var oCheckboxs=document.getElementsByName("item");
    		for (var i=0; i < oCheckboxs.length; i++) {
    			oCheckboxs[i].checked=oCheckbox.checked;
			}
    	}
    	function getSum_1(){
    		/*
    	    * 遍历所有名称为item的checkbox，如果其checked属性值为true
    	    * 加上该checkbox节点的value值
    	    */
    		var sum=0;
    		var oCheckboxs=document.getElementsByName("item");
    		//遍历 并求和
    		for (var i=0; i < oCheckboxs.length; i++) {
		     if (oCheckboxs[i].checked) {
		     	sum+=parseInt(oCheckboxs[i].value);
		     }
			}
			//span区域显示总金额
			var oSpan=document.getElementById("span_id_1");
			oSpan.innerHTML=sum+"元";
    	}
    </script>
    <hr />
    <input type="checkbox" name="all_item" onclick="chooseAll(this)" />全选
    <input type="button" value="总金额" onclick="getSum_1()"/>
    <span id="span_id_1"></span><br />
    <input type="checkbox" name="item" value="100"/>苹果imac:100元<br />
    <input type="checkbox" name="item" value="100"/>苹果imac:100元<br />
    <input type="checkbox" name="item" value="100"/>苹果imac:100元<br />
    <input type="checkbox" name="item" value="100"/>苹果imac:100元<br />
    <input type="checkbox" name="item" value="100"/>苹果imac:100元<br />
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 下面这个是难点：点击表头中的排行，
     根据排行这一列的单元格数值大小，实现整行的排序，升序和降序！
     先给排行这个字段添加a标签
     */
    <script type="text/javascript">
    	var flag=true;//定义全局变量，实现升序和降序
    	function sortTable_1(){
    		/*
    	    * 思路：行集合中的每一行 先存放到临时数组中
    	    * 对临时数据排序，根据的排行单元格的数值大小，对整行排序
    	    * 将排序后的数组成员（行）一一添加回表格appendChild
    	    * 定义一个flag如果是真就，顺序添加，否则逆序添加
    	    */
    		var oTab=document.getElementById("table_id_1");
    		var collTr=oTab.rows;
    		var trArr=[];
    		for (var i=1; i < collTr.length; i++) {
		     //除去表头,每行添加进临时数组；
		     trArr[i-1]=collTr[i];
			}
			//对临时数组选择排序
			for (var i=0; i < trArr.length-1; i++) {
		     for (var j=i+1; j < trArr.length; j++) {
				var i_value=parseInt(trArr[i].cells[0].innerHTML);
				var j_value=parseInt(trArr[j].cells[0].innerHTML);
				if (i_value>j_value) {
					var temp=i_value;
					i_value=j_value;
					j_value=temp;
				}
		     }
			}
			//最后一步，将排序后的元素(其实是行对象的地址值)
			//添加回表格！注意定义一个全局flag可以实现升序和降序
			if (flag) {
				for (var i=0; i < trArr.length; i++) {
					//用tbody添加方式1：
			     //oTab.childNodes[0].appendChild(trArr[i]);
			     trArr[i].parentNode.appendChild(trArr[i]);
				}
				flag=false;
			} else{
				for (var i=trArr.length-1; i >=0 ; i--) {
					//用tbody添加方式1：
			     //oTab.childNodes[0].appendChild(trArr[i]);
			     trArr[i].parentNode.appendChild(trArr[i]);
				}
				flag=true;
			}
    	}
    </script>
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：行颜色隔行显示，鼠标移进高亮，移出还原
     先定义一个全局变量class_Name,用于接收tr原来的样式名称
     然后在给每行遍历的时候，添加事件onmouseover
     */
    <script type="text/javascript">
    	//页面装载完毕就调用函数
    	onload=function(){
    		changeRowColor();
    	};
    	//也可以这样调用：onload=changeRowColor；
    	function changeRowColor(){
    		var class_Name;
    		//获得table节点，遍历每行，判断并赋值className
    		var oTab=document.getElementById("table_id_1");
    		var collTr=oTab.rows;
    		//从第2行开始改变，第1行是表头
    		for (var i=1; i < collTr.length; i++) {
		     if (i%2==1) {
		     	//alert(collTr[i].nodeName);
		     	collTr[i].className="odd";
		     } else{
		     	collTr[i].className="even";
		     }
		     //给每行添加onmouseover事件
		     collTr[i].onmouseover=function(){
		     	//先保存原来的样式名
		     	class_Name=this.className;
		     	this.className="mouse_over";
		     };
		     //给每行添加onmouseout事件
		     collTr[i].onmouseout=function(){
		     	this.className=class_Name;
		     };
			}
    	}
    </script>
    <table id="table_id_1">
    	<tr>
    		<th><a href="javascript:void(0)" onclick="sortTable_1()">排行</a></th>
    		<th>姓名</th>
    		<th>判词</th>
    	</tr>
    	<tr>
    		<td>1</td>
    		<td>林黛玉</td>
    		<td>可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋.</td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td>薛宝钗</td>
    		<td>可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋.</td>
    	</tr>
    	<tr>
    		<td>3</td>
    		<td>贾元春</td>
    		<td>二十年来辩是非,榴花开处照宫闱.三春争及初春景?虎兕相逢大梦归.</td>
    	</tr>
    	<tr>
    		<td>4</td>
    		<td>贾探春</td>
    		<td>才自清明志自高,生于末世运偏消.清明涕泣江边望,千里东风一梦遥.</td>
    	</tr>
    	<tr>
    		<td>5</td>
    		<td>史湘云</td>
    		<td>富贵又为何?襁褓之间父母违.展眼吊斜辉,湘江水逝楚云飞.</td>
    	</tr>
    	<tr>
    		<td>6</td>
    		<td>妙玉</td>
    		<td>欲洁何曾洁?云空未必空.可怜金玉质,终陷淖泥中.</td>
    	</tr>
    	<tr>
    		<td>7</td>
    		<td>贾迎春</td>
    		<td>子系中山狼,得志便猖狂.金闺花柳质,一载赴黄粱.</td>
    	</tr>
    	<tr>
    		<td>8</td>
    		<td>贾惜春</td>
    		<td>堪破三春景不长,缁衣顿改昔年装.可怜绣户侯门女,独卧青灯古佛旁.</td>
    	</tr>
    	<tr>
    		<td>9</td>
    		<td>王熙凤</td>
    		<td>凡鸟偏从末世来,都知爱慕此生才.一从二令三木入,哭向金陵事更哀.</td>
    	</tr>
    	<tr>
    		<td>10</td>
    		<td>贾巧姐</td>
    		<td>势败休云贵,家亡莫论亲.偶因济村妇,巧得遇恩人.</td>
    	</tr>
    	<tr>
    		<td>11</td>
    		<td>李纨</td>
    		<td>桃李春风结子完,到头谁似一盆兰.如冰水好空相妒,枉与他人作笑谈.</td>
    	</tr>
    	<tr>
    		<td>12</td>
    		<td>秦可卿</td>
    		<td>情天情海幻情深,情既相逢必主淫,漫言不肖皆荣出,造衅开端实在宁.</td>
    	</tr>
    </table>
    </body>
</html>

以上就是Javascript_12_DOM_表格排序的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

Javascript，DOM，表格排序 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Javascript_11_DOM_表格练习下一条：Javascript_13_DOM_邮件列表