Javascript_12_DOM_表格排序

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

javascript_12_dom_表格排序

    
    <meta>
    <title>DOM_表格练习</title>
    <style>
    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>
    
    
    <h1>DOM_表格练习</h1>
    <script>    </script>
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：全选按钮，商品算金额
     */
    <script>
    	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>全选
    <input>
    <span></span><br>
    <input>苹果imac:100元<br>
    <input>苹果imac:100元<br>
    <input>苹果imac:100元<br>
    <input>苹果imac:100元<br>
    <input>苹果imac:100元<br>
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 下面这个是难点：点击表头中的排行，
     根据排行这一列的单元格数值大小，实现整行的排序，升序和降序！
     先给排行这个字段添加a标签
     */
    <script>
    	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>
    	//页面装载完毕就调用函数
    	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>

排行	姓名	判词
1	林黛玉	可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋.
2	薛宝钗	可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋.
3	贾元春	二十年来辩是非,榴花开处照宫闱.三春争及初春景?虎兕相逢大梦归.
4	贾探春	才自清明志自高,生于末世运偏消.清明涕泣江边望,千里东风一梦遥.
5	史湘云	富贵又为何?襁褓之间父母违.展眼吊斜辉,湘江水逝楚云飞.
6	妙玉	欲洁何曾洁?云空未必空.可怜金玉质,终陷淖泥中.
7	贾迎春	子系中山狼,得志便猖狂.金闺花柳质,一载赴黄粱.
8	贾惜春	堪破三春景不长,缁衣顿改昔年装.可怜绣户侯门女,独卧青灯古佛旁.
9	王熙凤	凡鸟偏从末世来,都知爱慕此生才.一从二令三木入,哭向金陵事更哀.
10	贾巧姐	势败休云贵,家亡莫论亲.偶因济村妇,巧得遇恩人.
11	李纨	桃李春风结子完,到头谁似一盆兰.如冰水好空相妒,枉与他人作笑谈.
12	秦可卿	情天情海幻情深,情既相逢必主淫,漫言不肖皆荣出,造衅开端实在宁.