6miu盘搜

jsday07补充(表格按年龄排序逆序间隔行切换颜色还有鼠标互动统一概念)

xiaoxiao2021-02-28 130

<script type="text/javascript" src="doctool.js"> </script> <script type="text/javascript"> /* 表格中按照年龄的顺序进行排序思路 1、每一个人的信息是一行那么先将行都取出临时存入到数组中 2、并对数组中的行对象的其中一个单元格中的数据进行排序 3、将排序后的行对象重新添加到表格对象中 */ var b = true; function sorttab() { //1、获取表格中所有行对象 var tabNode=byTag("table")[0]; var trs = tabNode.rows; //alert(trs.length); //2、定义；临时容器将表格中需要参入排序的行对象临时存储 var arr = new Array();//临时容器中存入的都是表格行对象的引用 for(var x= 1; x<trs.length;x++) { arr[x-1]= trs[x]; } //alert(arr.length); sortt(arr); var tbdNode = tabNode.childNodes[1]; //alert(tbdNode.nodeName); if(b){ for(var x= 0;x<arr.length;x++) { //alert(arr[x].cells[0].innerText+arr[x].cells[1].innerText); tbdNode.appendChild(arr[x]); } b=false; } else { for(var x= arr.length-1;x>=0;x--) { //alert(arr[x].cells[0].innerText+arr[x].cells[1].innerText); tbdNode.appendChild(arr[x]); } b=true; } } function sortt(arr) { for (var x= 0;x<arr.length;x++) { for (var y= x+1;y<arr.length;y++) { if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))//用parseInt就按照大小来排不然就是按照字符串的字典顺序 { var temp = arr[x]; arr[x]= arr[y]; arr[y]= temp; } } } } </script> </head> <body> <table> <tr> <th>姓名</th> <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th> <th>地址</th> </tr> <tr> <td>张苏纳</td> <td>11</td> <td>天堂</td> </tr> <tr> <td>小白</td> <td>14</td> <td>上号</td> </tr> <tr> <td>如果</td> <td>8</td> <td>玩玩</td> </tr> <tr> <td>是</td> <td>18</td> <td>大岸</td> </tr> </table> </body> <script type="text/javascript" src="doctool.js"> </script> <link rel="stylesheet" href="css-05.css" /> <style type="text/css"> .one{ background-color:#F00; } .two{ background-color:#9C6; } .over{ background-color:#FF0; } </style> <script type="text/javascript"> //行颜色间隔显示 function tabcolor() { var tabNode = byTag("table")[0]; var trs = tabNode.rows; //alert(trs.length); for(var x= 1; x<trs.length;x++) { if(x%2==1) { trs[x].className ="one"; } else trs[x].className="two"; trs[x].onmouseover=function() { name = this.className; this.className="over"; }; trs[x].onmouseout=function() { this.className=name; }; } } var name ; /*function over(trNode) { name = trNode.className; trNode.className="over"; } function out (trNode) { trNode.className=name;//注意不能加引号引号认为你是新的样式选择器 }*/ window.onload = tabcolor; </script> </head> <body> <table> <tr > <th>姓名</th> <th><a href="javascript:void(0)" onclick="">年龄</a></th> <th>地址</th> </tr> <tr onmouseover="over(this)" onmouseout="out(this)"> <td>张苏纳</td> <td>11</td> <td>天堂</td> </tr> <tr> <td>小白</td> <td>14</td> <td>上号</td> </tr> <tr> <td>如果</td> <td>8</td> <td>玩玩</td> </tr> <tr> <td>是</td> <td>18</td> <td>大岸</td> </tr> </table> </body>

转载请注明原文地址: https://www.6miu.com/read-20004.html

技术

最新回复(0)