您的位置：首页 > Web前端 > JavaScript

Javascript_12_DOM_表格排序

2013-11-13 14:03 465 查看 
<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 DOM
相关文章推荐
新的分享
章节导航