Heim >Web-Frontend >js-Tutorial >Javascript_12_DOM_Table-Sortierung
Javascript_12_DOM_Table-Sortierung
- 黄舟Original
- 2017-01-18 16:47:35987Durchsuche
Javascript_12_DOM_Table-Sortierung
<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>
Das Obige ist der Inhalt der Javascript_12_DOM_Table-Sortierung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www .php .cn)!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript_11_DOM_Table-ÜbungNächster Artikel：Javascript_11_DOM_Table-Übung
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse