Javascript_12_DOM_Table sorting
<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 id="DOM-表格练习">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>
The above is the content of Javascript_12_DOM_Table sorting. For more related content, please pay attention to the PHP Chinese website (www.php.cn )!
es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
foreach是es6里的吗May 05, 2022 pm 05:59 PMforeach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
WebStorm Mac version
Useful JavaScript development tools
Atom editor mac version download
The most popular open source editor
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
