JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强
对上篇博客的最后那个表格隔行高亮显示加了个功能，鼠标监听和年龄从小到大排序。
演示代码：
<html>
<head>
<title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
@import url(table.css);
.one{
background:#00ff00;
}
.two{
background:rgb(210,0,0);
}
.over{
background-color:#ffff00;
}
</style>
<script type="text/javascript">
function trColor(){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
for(var x=1;x<arrTrs.length; x++){
if(x%2==1){
arrTrs[x].className="one";
}else{
arrTrs[x].className="two";
}
//为每一行动态注册事件处理方法
var oldClassName;
arrTrs[x].onmouseover=function(){
//监听鼠标-移动到那一行
oldClassName=this.className;
this.className="over";
};
arrTrs[x].onmouseout=function(){
//鼠标监听-移开
this.className=oldClassName;
};
}
}
//onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
//但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
onload=function(){
trColor();
//还可以在这里写其它代码，甚至调用其它函数
};
//这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
//而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
</script>
<script type="text/javascript">
function sortTable(){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;
//思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中
//放到新容器arrTrs2中
var arrTrs2 = [];
for (var x = 1; x < arrTrs.length; x++) {
arrTrs2[x - 1] = arrTrs[x];
}
//arrTrs2数组可以看成arrTrs数组的引用
//对容器arrTrs2中的元素进行排序
mySort(arrTrs2);
//把排序后的行对象重新加到表格中
for (var x = 0; x < arrTrs2.length; x++) {
//arrTrs2[x].parentNode.nodeName//TBODY
arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
//arrTrs2数组可以看成arrTrs数组的引用
}
}
function mySort(arr){
for(var x=0;x<arr.length-1;x++){
for(var y=x+1;y<arr.length;y++){
if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table id="dataTable">
<tr>
<th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th> <th>地址</th>
</tr>
<tr>
<td>张三</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>李四</td> <td>24</td> <td>湖南长沙</td>
</tr>
<tr>
<td>王五</td> <td>53</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>65</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>13</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>8</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>73</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>29</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>20</td> <td>湖南长沙</td>
</tr>
</table>
</body>
</html>
table.css:
table {
border:#ff80ff 1px solid;
/*solid : 实线边框 */
width:800px;
border-collapse:collapse;
/*separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
*/
}
table td{/*table 下面的td*/
border:#0000ff 1px solid;
padding:5px;/*内补丁*/
}
table th{
border:#ff80ff 1px solid;
padding:5px;
background-color:#c0c0c0;
}演示结果：
鼠标监听：
点一下年龄：实现表格按年龄从小到大排序
现在我们觉得上面的不好，只能从小到大排序，而且排序后颜色也变了。不好看，现在我们来对它进行改进。
代码演示：
<html>
<head>
<title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
@import url(table.css);
.one{
background:#00ff00;
}
.two{
background:rgb(210,0,0);
}
.over{
background-color:#ffff00;
}
a{
text-decoration:none;/*装饰-去掉下划线*/
}
</style>
<script type="text/javascript">
function trColor(){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
for(var x=1;x<arrTrs.length; x++){
if(x%2==1){
arrTrs[x].className="one";
}else{
arrTrs[x].className="two";
}
//为每一行动态注册事件处理方法
var oldClassName;
arrTrs[x].onmouseover=function(){
//监听鼠标-移动到那一行
oldClassName=this.className;
this.className="over";
};
arrTrs[x].onmouseout=function(){
//鼠标监听-移开
this.className=oldClassName;
};
}
}
//onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
//但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
onload=function(){
trColor();
//还可以在这里写其它代码，甚至调用其它函数
};
//这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
//而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
</script>
<script type="text/javascript">
var flag=true;
function sortTable(aNode){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;
//思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中
//放到新容器arrTrs2中
var arrTrs2 = [];
for (var x = 1; x < arrTrs.length; x++) {
arrTrs2[x - 1] = arrTrs[x];
}
//arrTrs2数组可以看成arrTrs数组的引用
//对容器arrTrs2中的元素进行排序
mySort(arrTrs2);
//把排序后的行对象重新加到表格中
if(flag){
for (var x = 0; x < arrTrs2.length; x++) {
//arrTrs2[x].parentNode.nodeName//TBODY
arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
//arrTrs2数组可以看成arrTrs数组的引用
}
aNode.innerHTML="年龄↑";
}else{
for(var x=arrTrs2.length-1;x>=0;x--){
arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
}
aNode.innerHTML="年龄↓";
}
flag = !flag;
trColor();
}
function mySort(arr){
for(var x=0;x<arr.length-1;x++){
for(var y=x+1;y<arr.length;y++){
if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table id="dataTable">
<tr>
<th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable(this)">年龄</a></th> <th>地址</th>
</tr>
<tr>
<td>张三</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>李四</td> <td>24</td> <td>湖南长沙</td>
</tr>
<tr>
<td>王五</td> <td>53</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>65</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>13</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>8</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>73</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>29</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>20</td> <td>湖南长沙</td>
</tr>
</table>
</body>
</html>
演示结果：
JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强的更多相关文章
- JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)
这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
- JavaScript---网络编程(10)--DHTML技术演示(3)-多选框
这节讲述多选框的使用,当然,肯定是结合css和Javascript一起的. checkbox的使用1: 演示代码: <html> <head> <meta http-eq ...
- JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该 ...
- JavaScript---网络编程(8)-DHTML技术演示(1)
DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程 ...
- java基础-网络编程（Socket）技术选型入门之NIO技术
java基础-网络编程(Socket)技术选型入门之NIO技术 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.传统的网络编程 1>.编写socket通信的MyServer ...
- Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合
操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...
- JAVA的网络编程
网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在 学习网络编程以前,很多初学者可能觉得网络编 ...
- JAVA网络编程【转】出处不详
网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在 学习网络编程以前,很多初学者可能觉得网络编 ...
随机推荐
- 解决Windows+Eclipse+Python错误： SyntaxError: Non-ASCII character
这个问题出现的原因是在文中使用了中文或者其他的非英文字符 最简单的解决办法: 在文件的第一行加上编码表示,切记:一定要是第一行,而且在前面没有任何对文件和项目的注释. 也就是说在Windows Ecl ...
- jQuery 之 .stop() 方法
总结version 1.7版本前.stop([clearQueue][,jumpToEnd])clearQueue: 布尔值,默认是 false;此值处理是相关的动画队列是否移除,如果为 false ...
- GDI画验证码
Random r = new Random(); string str = ""; for (int i = 0; i < 5; i++) { int a= r.Next(0 ...
- .NET多线程编程(转)
在.NET多线程编程这个系列我们讲一起来探讨多线程编程的各个方面.首先我将在本篇文章的开始向大家介绍多线程的有关概念以及多线程编程的基础知识;在接下来的文章中,我将逐一讲述.NET平台上多线程编程的知 ...
- wampserver下升级php7
1.下载php7 http://windows.php.net/download#php-7.0 选择 VC14 x86 Thread Safe 64位选X64 32位选X86 2.下载VC14 ...
- C#中线程的用法
通过委托的方式创建线程 static int sum(int x) { return x+x; { Func<int> a = sum; 创建一个新的线程格式:a.BeginInvoke( ...
- ubuntu导出文件
ye@aliyun:python$ ./deploy.sh backup static-rw-r--r-- 1 ye ye 174K 2014-03-22 10:36 ./backup/fbz_sta ...
- Makefile与shell脚本的区别
引用博客:Makefile与shell脚本区别 在Makefile可以调用shell脚本,但是Makefile和shell脚本是不同的.本文试着归纳一下Makefile和shell脚本的不同. 1.s ...
- Java多线程初学者指南（12）：使用Synchronized块同步变量
我们可以通过synchronized块来同步特定的静态或非静态方法.要想实现这种需求必须为这些特性的方法定义一个类变量,然后将这些方法的代码用synchronized块括起来,并将这个类变量作为参数传 ...
- hdu 2460
这是一道双联通分量的题,要用到LCA算法: 听说这个算法有两种实现方式:一个是dfs+线段树或着RMQ;一个是用tarjin: 我用的是tarjin: 题目比较简单,就是每次加了一条边之后剩下的桥的个 ...