html中使用js和css如何实现对人名筛选排序?

html中使用js和css如何实现对人名筛选排序?,第1张

一般都是先排序再渲染,可以是服务器端直接输出排序结果直接渲染,也可以获取数据之后排序完再渲染。

如果是渲染完再排序那么页面会发生”闪现“,严重点会出现页面短暂混乱,如果列表很长那么页面将”自己动起来“,很吓人的。比起页面”自己动起来“宁愿让它短暂的"转圈圈"一点点加载。

使用for循环,里面使用if else语句。网上有很多实例比如 function sortAge(){//对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序var tabNode = document.getElementById(tabid) var rows0 = tabNode.rows var rows1 = [] //现将元素拷贝一份出来, 第一行不用排序for (var x = 1x <rows0.lengthx++) {rows1[x - 1] = rows0[x] }for (var x = 0x <rows1.length - 1x++) {//每个元素是行对象for (var y = x + 1y <rows1.lengthy++) {//对每一行的内容进行解析成数字if (parseInt(rows1[x].cells[1].innerHTML) >parseInt(rows1[y].cells[1].innerHTML)) {//alert(aa=+x+:+rows1[x].cells[1].innerHTML) //alert(bb+rows1[y].cells[1].innerHTML) var temp = rows1[x] rows1[x] = rows1[y] rows1[y] = temp }}} /* 点击之后排序,排序之后恢复之前的状态 if (flag){ for (var x = 0x <rows1.lengthx++) {// tabNode.childNodes[0].appendChild(rows[x])//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]) }}else{ for (var x = 1x <rows0.lengthx++) {// tabNode.childNodes[0].appendChild(rows[x])//方法一: 不一定兼容rows0[x].parentNode.appendChild(rows0[x]) }}flag=!flag*//* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/var ageimg=document.getElementById(ageid)if (flag) {for (var x = 0x <rows1.lengthx++) {//排好序之后就从0开始// tabNode.childNodes[0].appendChild(rows[x])//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]) }ageimg.innerHTML=年龄▲//设置上面的图标 }else{for (var x = rows1.length-1x >=0x--) {// tabNode.childNodes[0].appendChild(rows[x])//方法一: 不一定兼容rows1[x].parentNode.appendChild(rows1[x]) }ageimg.innerHTML=年龄▼}flag=!flag loading()//排序之后还要对颜色重新设置 }


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7571900.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表(0条)

保存