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//TBODYarrTrs2[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//TBODYarrTrs2[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---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
一:用最底层的方式,该方式用来创建别的对象树也可以代码演示: <html><head><title>DHTML技术演示---表格创建--用最底层的方式,其实该方式 ...
JavaScript---网络编程(8)-DHTML技术演示(1)
DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程 ...
JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)
这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...
栈溢出脚本_漏洞练习之网络编程与堆栈溢出技术
0x00 公众号之前发过Exploit-Exercise之Nebula实践指南,Exploit-Exercise一共有5个镜像可供练习,如下所示本系列文章将会介绍第二个镜像Protostar的通关经 ...
网络技术概念与Java网络编程技术——最通俗的理解（转载）
网络编程网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在学习网络编程以前,很多初学者可能觉得网络编 ...
java网络编程（四）
文章推荐精选java等全套视频教程精选java电子图书大数据视频教程精选 java项目练习精选网络编程UDP 网络通讯的方式除了TCP方式以外,还有一种实现的方式就是UDP方式.UDP(Use ...
【带你入门】java网络编程
网络编程网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在学习网络编程以前,很多初学者可能觉得网络编 ...
JAVA的网络编程【转】
转自 http://www.cnblogs.com/springcsc/archive/2009/12/03/1616413.html 网络编程网络编程对于很多的初学者来说,都是很向往的一种编程技能 ...
Java进阶之网络编程
网络编程网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在学习网络编程以前,很多初学者可能觉得网络编 ...

JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强

JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强相关推荐

最新文章

热门文章