直接看代码
<table border="1" cellspacing="0"> <thead class="tou"> <tr> <td>选择按钮</td> <td>汽车编号</td> <td>汽车图片</td> <td>汽车系列名称</td> <td>汽车能源</td> <td>汽车报价</td> <td>汽车特点</td> <td>汽车类型</td> <td class="gn">功能</td> </tr> </thead> <tbody class="shenti"> <c:forEach items="${lb }" var="l" varStatus="li"> <tr class="t"> <td><input type="checkbox" class="cx" value="${l.cid }"/></td> <td>${li.count }</td> <td><img src="${l.cimg}" style="width: 160px;height: 90px"></td> <td>${l.csy }</td> <td>${l.cny }</td> <td class="bj">${l.cprice }</td> <td>${l.ctd }</td> <td>${l.tyname }</td> <td> <input type="button" value="修改" class="anniu1" οnclick="xg(${l.cid})"/> <input type="button" value="删除" class="anniu2" οnclick="sc(${l.cid})"/> </td> </tr> </c:forEach> </tbody> </table> //升序排序 function sxpx(){ //创建两个数组 let arr1=[]; let arr2=[]; $(".t").each(function (i){ arr1[i]=$(this).html(); }) $(".bj").each(function (i){ arr2[i]=Number($(this).html()); }) //冒泡排序 for (let i = 0; i < arr2.length-1; i++) { for (let j = 0; j < arr2.length-1-i; j++) { if (arr2[j]>arr2[j+1]){ //小数组排序 let temp2=arr2[j]; arr2[j]=arr2[j+1]; arr2[j+1]=temp2; //大数组排序 let temp1=arr1[j]; arr1[j]=arr1[j+1]; arr1[j+1]=temp1; } } } $(".t").each(function (i){ $(this).html(arr1[i]); }) } //降序排序 function jxpx(){ //创建两个数组 let arr1=[]; let arr2=[]; $(".t").each(function (i){ arr1[i]=$(this).html(); }) $(".bj").each(function (i){ arr2[i]=Number($(this).html()); }) //冒泡排序 for (let i = 0; i < arr2.length-1; i++) { for (let j = 0; j < arr2.length-1-i; j++) { if (arr2[j]<arr2[j+1]){ //小数组排序 let temp2=arr2[j]; arr2[j]=arr2[j+1]; arr2[j+1]=temp2; //大数组排序 let temp1=arr1[j]; arr1[j]=arr1[j+1]; arr1[j+1]=temp1; } } } $(".t").each(function (i){ $(this).html(arr1[i]); }}
如果让我自己写的话,我也有点懵,但思路我是理解的,蓝色部分分别是给列表全页面和要排序的列设置class,然后开始排序。
首先,创建两个数组,用each遍历全页面和要排序的列,分别装到连两个数组中,然后进行冒泡排序,排序是对要排序的那个数组进行冒泡,我们看见有小数组排序和大数组排序,因为当列表页面一列动了,那其它列是不是也要跟着动,数组才是正确的,所以大数组跟着小数组的排序规则进行排序就可以了,组后大数组arr1排完后,将整体的数据给放到以前的数组中就可以了,升序变降序,降序变升序,就把比较符号换换就可以了,逻辑不是很绕,到写起来头晕😔,大家能用sql语句排序就用sql语句排序吧!