html网站首页图片切换,中山网红粥,江苏省建设工程竣工验收网站,长沙网站制作公司哪家好我们在上网中都能看到很多能够排序的#xff0c;如大小、时间、价格等现在我们也试一下排序功能#xff1a;排序的函数代码#xff1a;里面含有点击之后排序--还原#xff0c;和排升序和降序。function sortAge(){//对年龄进行排序#xff0c;要先进行获得每一行对象…我们在上网中都能看到很多能够排序的如大小、时间、价格等现在我们也试一下排序功能排序的函数代码里面含有点击之后排序--还原和排升序和降序。function sortAge(){//对年龄进行排序要先进行获得每一行对象然后对象对象中的第一个(从0 开始)的大小进行排序var tabNode document.getElementById(tabid);var rows0 tabNode.rows;var rows1 [];//现将元素拷贝一份出来 第一行不用排序for (var x 1; x rows0.length; x) {rows1[x - 1] rows0[x];}for (var x 0; x rows1.length - 1; x) {//每个元素是行对象for (var y x 1; y rows1.length; y) {//对每一行的内容进行解析成数字if (parseInt(rows1[x].cells[1].innerHTML) parseInt(rows1[y].cells[1].innerHTML)) {//alert(aax:rows1[x].cells[1].innerHTML);//alert(bbrows1[y].cells[1].innerHTML);var temp rows1[x];rows1[x] rows1[y];rows1[y] temp;}}}/* 点击之后排序排序之后恢复之前的状态if (flag){for (var x 0; x rows1.length; x) {// tabNode.childNodes[0].appendChild(rows[x]);//方法一 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}}else{for (var x 1; x rows0.length; x) {// tabNode.childNodes[0].appendChild(rows[x]);//方法一 不一定兼容rows0[x].parentNode.appendChild(rows0[x]);}}flag!flag;*//* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/var ageimgdocument.getElementById(ageid);if (flag) {for (var x 0; x rows1.length; x) {//排好序之后就从0开始// tabNode.childNodes[0].appendChild(rows[x]);//方法一 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}ageimg.innerHTML年龄▲;//设置上面的图标}else{for (var x rows1.length-1; x 0; x--) {// tabNode.childNodes[0].appendChild(rows[x]);//方法一 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}ageimg.innerHTML年龄▼}flag!flag;loading();//排序之后还要对颜色重新设置}设置表格的背景颜色代码导入的cssfunction loading(){var name;var tabNodedocument.getElementById(tabid);var rowstabNode.rows;//获得每一行的数组对象var rowslengthrows.length;//每一行的长度for(var x1;xif(x%20){rows[x].classNameone;}else{rows[x].classNametwo;}//当移动上去之后之前的颜色要记录下来不然移下来之后全部都是一个颜色了rows[x].οnmοuseοverfunction(){namethis.className;this.classNamethree;}rows[x].οnmοuseοutfunction(){this.classNamename;}}}οnlοadfunction(){loading();}css代码table td a:hover{background-color:#0080c0;}.one{background-color:#80ff00;}.two{background-color:#ff8040;}.three{background-color:#008040;}table{width:500px;height:500px;border:#400040 solid 2px;border-collapse:collapse;}table td,th{border:solid 2px;}table th{background-color:#c0c0c0;}效果图-----排序之前升序降序完整代码sort.htmltable td a:hover{background-color:#0080c0;}.one{background-color:#80ff00;}.two{background-color:#ff8040;}.three{background-color:#008040;}table{width:500px;height:500px;border:#400040 solid 2px;border-collapse:collapse;}table td,th{border:solid 2px;}table th{background-color:#c0c0c0;}function loading(){var name;var tabNodedocument.getElementById(tabid);var rowstabNode.rows;//获得每一行的数组对象var rowslengthrows.length;//每一行的长度for(var x1;xif(x%20){rows[x].classNameone;}else{rows[x].classNametwo;}//当移动上去之后之前的颜色要记录下来不然移下来之后全部都是一个颜色了rows[x].οnmοuseοverfunction(){namethis.className;this.classNamethree;}rows[x].οnmοuseοutfunction(){this.classNamename;}}}οnlοadfunction(){loading();}var flagtrue;function sortAge(){//对年龄进行排序要先进行获得每一行对象然后对象对象中的第一个(从0 开始)的大小进行排序var tabNode document.getElementById(tabid);var rows0 tabNode.rows;var rows1 [];//现将元素拷贝一份出来 第一行不用排序for (var x 1; x rows0.length; x) {rows1[x - 1] rows0[x];}for (var x 0; x rows1.length - 1; x) {//每个元素是行对象for (var y x 1; y rows1.length; y) {//对每一行的内容进行解析成数字if (parseInt(rows1[x].cells[1].innerHTML) parseInt(rows1[y].cells[1].innerHTML)) {//alert(aax:rows1[x].cells[1].innerHTML);//alert(bbrows1[y].cells[1].innerHTML);var temp rows1[x];rows1[x] rows1[y];rows1[y] temp;}}}/* 点击之后排序排序之后恢复之前的状态if (flag){for (var x 0; x rows1.length; x) {// tabNode.childNodes[0].appendChild(rows[x]);//方法一 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}}else{for (var x 1; x rows0.length; x) {// tabNode.childNodes[0].appendChild(rows[x]);//方法一 不一定兼容rows0[x].parentNode.appendChild(rows0[x]);}}flag!flag;*//* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/var ageimgdocument.getElementById(ageid);if (flag) {for (var x 0; x rows1.length; x) {//排好序之后就从0开始// tabNode.childNodes[0].appendChild(rows[x]);//方法一 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}ageimg.innerHTML年龄▲;//设置上面的图标}else{for (var x rows1.length-1; x 0; x--) {// tabNode.childNodes[0].appendChild(rows[x]);//方法一 不一定兼容rows1[x].parentNode.appendChild(rows1[x]);}ageimg.innerHTML年龄▼}flag!flag;loading();//排序之后还要对颜色重新设置}姓名年龄出生地张三13湖南长沙李四15湖南常德jack45湖南临澧王华23浙江杭州张进30安微合肥周全23湖南益阳杨哥42湖南常德以上就是本文的全部内容很详细教大家如何对表格中的元素进行排序操作感谢大家阅读这篇javascript实现对表格元素进行排序操作的文章希望大家喜欢。
