使用js点击实现正序倒序排列
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta keywords="JavaScript" />
<meta content="1" />
<title>1</title>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
table, table td, table th {
  border: none;
  vertical-align: top;
  border-collapse: collapse;
  word-break: break-all;
}
.MainTable {
  width: 500px;
  line-height: 45px;
  margin: auto;
  text-align: left;
}
.MainTable tr {
  border-bottom:1px solid #E1E1E1;
}
.MainTable td {
  padding: 0 10px 0 0;
}
/*正序排列样式*/
.sort_asc {
  background:url(images/sorticon.png) 55px 18px no-repeat;
  cursor:pointer;
}
/*倒序排列样式*/
.sort_desc {
  background:url(images/sorticon.png) 55px -18px no-repeat;
  cursor:pointer;
}
.list_sort {
  width: 60px;
  text-align: center;
}
</style>

</head>
<body>
<div class="divframe">
  <table class="MainTable">
    <thead>
      <tr>
        <th class="sort_asc list_sort" id="sortID">序号</th>
        <th>内容</th>
      </tr>
    </thead>
    <tbody id="pageContent">
      <tr>
        <td class="list_sort">1</td>
        <td>1</td>
      </tr>
      <tr>
        <td class="list_sort">2</td>
        <td>2</td>
      </tr>
      <tr>
        <td class="list_sort">3</td>
        <td>3</td>
      </tr>
      <tr>
        <td class="list_sort">4</td>
        <td>4</td>
      </tr>
      <tr>
        <td class="list_sort">5</td>
        <td>5</td>
      </tr>
      <tr>
        <td class="list_sort">6</td>
        <td>6</td>
      </tr>
      <tr>
        <td class="list_sort">7</td>
        <td>7</td>
      </tr>

    </tbody>
  </table>
</div>
</body>
<script type="text/javascript">
    $('#sortID').click(function (){     


    })
</script>
</html>

2个回答

给你优化了下,不用写死代码,动态排序,直接贴到html文件中,在浏览器中查看效果

 <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta keywords="JavaScript" />
<meta content="1" />
<title>1</title>
<script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>
<style type="text/css">
table, table td, table th {
  border: none;
  vertical-align: top;
  border-collapse: collapse;
  word-break: break-all;
}
.MainTable {
  width: 500px;
  line-height: 45px;
  margin: auto;
  text-align: left;
}
.MainTable tr {
  border-bottom:1px solid #E1E1E1;
}
.MainTable td {
  padding: 0 10px 0 0;
}
/*正序排列样式*/
.sort_asc {
  background:url(images/sorticon.png) 55px 18px no-repeat;
  cursor:pointer;
}
/*倒序排列样式*/
.sort_desc {
   background:url(images/sorticon.png) 55px -18px no-repeat;
  cursor:pointer;
}
.list_sort {
  width: 60px;
  text-align: center;
}
</style>
<script type="text/javascript">
    var ord=0;
    $(function(){
        changeOrder();
        $('#sortID').click(function (){     
            ord++;
            changeOrder();
        })
    })

    function changeOrder(){
        var html='';
        //正序排列
        if(ord%2==0){
            //表头样式更新
            $("#sortID").removeClass("sort_desc");
            $("#sortID").addClass("sort_asc");
            for(var i=0;i<7;i++){
                var value=i+1;
                html+=('<tr><td class="list_sort">'+value+'</td><td>'+value+'</td)</tr>');
            }
        }
        else{
        //倒序排列
            $("#sortID").removeClass("sort_asc");
            $("#sortID").addClass("sort_desc");
            var num=0;
            for(var i=7;i>0;i--){
                num++;
                var value=i;
                html+=('<tr><td class="list_sort">'+num+'</td><td>'+value+'</td)</tr>');
            }
        }
        $("#pageContent").html(html);
    }
</script>
</head>
<body>
<div class="divframe">
  <table class="MainTable">
    <thead>
      <tr>
        <th class="list_sort" id="sortID">序号</th>
        <th class="list_sort">内容</th>
      </tr>
    </thead>
    <tbody id="pageContent">
    </tbody>
  </table>
</div>
</body>
</html>

用js创建表格数据会更好控制;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            table,
            table td,
            table th {
                border: none;
                vertical-align: top;
                border-collapse: collapse;
                word-break: break-all;
            }

            .MainTable {
                width: 500px;
                line-height: 45px;
                margin: auto;
                text-align: left;
            }

            .MainTable tr {
                border-bottom: 1px solid #E1E1E1;
            }

            .MainTable td {
                padding: 0 10px 0 0;
            }

            /*正序排列样式*/
            .sort_asc {
                background: url(images/sorticon.png) 55px 18px no-repeat;
                cursor: pointer;
            }

            /*倒序排列样式*/
            .sort_desc {
                background: url(images/sorticon.png) 55px -18px no-repeat;
                cursor: pointer;
            }

            .list_sort {
                width: 60px;
                text-align: center;
            }
        </style>

    </head>
    <body>
        <div class="divframe">
            <table class="MainTable">
                <thead>
                    <tr>
                        <th class="sort_asc list_sort" id="sortID">序号</th>
                        <th>内容</th>
                    </tr>
                </thead>
                <tbody id="pageContent"></tbody>
            </table>
        </div>
    </body>
    <script type="text/javascript">
        var num = [1, 2, 3, 4, 5, 6, 7, 8];

        function setHtml() {
            var html = ""
            for (var i = 0; i < num.length; i++) {
                html += '<tr><td class="list_sort">' + (i + 1) + '</td><td>' + num[i] + '</td></tr>';
            }
            $("#pageContent").html(html);
        }
        setHtml();
        $('#sortID').click(function() {
            num.reverse();
            console.log(num);
            setHtml();
        })
    </script>
</html>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js中倒序遍历map的key和value

for(var key in myMap) {} 目前用此方法在Js中遍历类似map的key和value。但是这个能倒序遍历吗?哪位大神置顶一下

JS实现点击图片可弹出大图

如题,使用Javascript,实现点击图片可弹出大图,大图可关闭? 新手求问! 谢谢

jquery实现点击按钮某一列按照数字大小进行排序

如图 这是最初的排序 ![图片说明](https://img-ask.csdn.net/upload/201609/11/1473592557_347054.jpg) 操作后显示成这样 步骤1 ![图片说明](https://img-ask.csdn.net/upload/201609/11/1473592618_763926.jpg) 结果 ![图片说明](https://img-ask.csdn.net/upload/201609/11/1473592658_652828.jpg) 附上代码图,希望大神可以写一个操作程序 ``` <?php header("Content-type:text/html;charset=utf-8"); ?> <div class="import-index" xmlns="http://www.w3.org/1999/html"> <h1>测试排序</h1> <div style="margin-left: 100px; width: 900px;"> <div style=" margin-top: 80px;"> <h2> <span style="margin-left: 650px;"><input class="btn btn-success" type="button" style="height:30px; line-height:10px;width:150px;font-size:14px;padding-left:5px;" onclick="SortTb()" value="排序刷新"/></span> </h2> </div> <table border="2" style=" width: 900px" id="matter"> <tr align="center"> <td style="padding: 5px;">序号</td> <td style="padding: 5px;">标题</td> <td style="padding: 5px;">备注</td> <td style="padding: 5px;">排序</td> <td style="padding: 5px;"><input type="checkbox"/>&nbsp剔除</td> </tr> <tr align="center"> <td style="padding: 5px;" id="test">125</td> <td style="padding: 5px;">在浪荡不羁的日子里,勇闯天涯.....</td> <td style="padding: 5px;">打滚分组</td> <td style="padding: 3px;"><input size="3" type="text" name="num" value="1"/></td> <td><input type="checkbox" data-title="快乐" data-index="2" data-mark="打滚分组" data-num="1"name="remove[]"/></td> </tr> <tr align="center"> <td style="padding: 5px;" id="test">126</td> <td style="padding: 5px;">人生何处不相逢.......</td> <td style="padding: 5px;">打滚分组</td> <td style="padding: 3px;"><input size="3" type="text" name="num" value="2"/></td> <td><input type="checkbox" data-title="快乐" data-index="2" data-mark="打滚分组" data-num="1"name="remove[]"/></td> </tr> <tr align="center"> <td style="padding: 5px;" id="test">123</td> <td style="padding: 5px;">你快乐吗,我很快乐....</td> <td style="padding: 5px;">打滚分组</td> <td style="padding: 3px;"><input size="3" type="text" name="num" value="3"/></td> <td><input type="checkbox" data-title="快乐" data-index="2" data-mark="打滚分组" data-num="1"name="remove[]"/></td> </tr> <tr align="center"> <td style="padding: 5px;" id="test">124</td> <td style="padding: 5px;">昨天很美好,将来会怎样?.....</td> <td style="padding: 5px;">打滚分组</td> <td style="padding: 3px;"><input size="3" type="text" name="num" value="4"/></td> <td><input type="checkbox" data-title="快乐" data-index="2" data-mark="打滚分组" data-num="1"name="remove[]"/></td> </tr> </table> </div> </div> <script language="JavaScript" src="jquery-1.7.2.min.js"></script><!--注意引进JQ--> <script> function SortTb(){ // alert('hello'); } </script> ```

js实现a标签的点击事件

点击一个a标签有name属性用js实现让一个div显示出来 并给div

JS如何实现点击按钮切换背景图片?

如图,点击不同的按钮切换不同的背景图。初来乍到没东西悬赏,求大牛们解答一下![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/1.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/1.gif)![图片](https://img-ask.csdn.net/upload/201610/05/1475658054_178644.jpg)

如何使用js实现,点击链接可以将链接的页面显示在相应的div块中

如何使用js实现,点击链接可以将链接的页面显示在相应的div块中(不使用框架ifram)

求助js实现导航菜单点击切换

ul class="nav navbar-nav" id=“ulid” li class="active"> a href="。。。。。">导航1/a/li li a href="。。。。。">导航2/a /li li a href="。。。。。">导航3/a /li li a href="。。。。。">导航4/a /li /ul ``` ``` jS如何实现根据当前页面url 给当前a标签所在的li 添加一个class 属性,请清理同级别其他的li的class属性!

点击切换升序降序排列的问题

<a href="__URL__/index.html?type=search&{$searchUrl.borrow_duration.url}&{$searchUrl.borrow_status.url}&orderby=borrow_money">借款金额<i></i></a> <a href="__URL__/index.html?type=search&{$searchUrl.borrow_duration.url}&{$searchUrl.borrow_status.url}&orderby=rate">年利率<i></i></a> 现在点击借款金额或者年利率是升序排序 怎么让他再点一下变成降序再点一下又变成升序

用js如何实现点击任意一行跳转到另一画面

![图片说明](https://img-ask.csdn.net/upload/201509/02/1441176578_816405.png) 比如说一点击第一行的任意位置就跳到了对这一行的编辑画面(本来是点击编辑按钮,现在要是点击这一行的任意位置可以跳转页面)

求教JavaScript如何输出以下排列组合?

var arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9,0] ]; 如何得到 147,148,149,140,157,158 。。。。这种3*3*4的组合

js脚本实现浏览器自动点击

![图片说明](https://img-ask.csdn.net/upload/201702/18/1487429536_903087.jpg)![图片说明](https://img-ask.csdn.net/upload/201702/18/1487429560_560573.jpg)![图片说明](https://img-ask.csdn.net/upload/201702/18/1487429574_463656.jpg)![图片说明](https://img-ask.csdn.net/upload/201702/18/1487429588_863540.jpg)

js,jq怎么实现点击出现一个div,再次点击div消失

如图,点击图片出现下面的说明,然后再点击一下说明消失,麻烦大佬提供一下代码,十分感谢!

原生JS实现一个按钮的点击事件根据不同条件响应不同函数

例如,一个按钮实现暂停与继续。(下面错误代码只是为了表达意思- 。-) ``` <input id="btn" type="button" value="开始"> <script> window.onload=function(){ document.getElementById('btn').onclick=function(){ if(this.value="开始"){ this.value="暂停"; }esle{ this.value="开始"; } } </script> ``` 怎么实现当value值为“开始”时点击按钮将value值设为“暂停”,当value值为“暂停”时,点击按钮时将值设置为“开始”。即一个按钮根据条件执行不同功能。

js怎么实现初始化点击事件

我想在打开页面时,能够实现自动点击一个div的功能,不知道怎么做,求demo

用js编程实现获取页面按钮位置然后模拟鼠标点击该按钮

或者是用js定位到页面按钮的位置然后点击,注意不是利用鼠标位置定位

js怎么实现点击a标签就给他加上一个图片

如图,点击以后加上一个图片,点击别的字母原来的图片就消失,麻烦各位大佬提供一下代码,感谢![图片说明](https://img-ask.csdn.net/upload/201905/06/1557111030_193670.png)![图片说明](https://img-ask.csdn.net/upload/201905/06/1557111080_346851.png)

如何用js实现点击后在另一个div里显示传过来的图片对象

我有四个div <div id="sdiv1"><img id="myImg" src="images/s1.jpg" onclick="changeBig(this)" width="350px" height="200px" style="cursor:pointer"></div> <div id="sdiv2"><img id="myImg" src="images/s2.jpg" onclick="changeBig(this)" width="350px" height="200px" style="cursor:pointer"></div> <div id="sdiv3"><img id="myImg" src="images/s3.jpg" onclick="changeBig(this)" width="350px" height="200px" style="cursor:pointer"></div> <div id="sdiv4"></div> 怎么实现点击图片后,在sdiv4中显示函数传过来的图片对象?sdiv4是隐藏的display="none"; 位置就在这三个div上面。 哪位大神帮帮忙?

js实现页面一个按钮点击后相当于键盘按下ctrl+shift+b的功能

js实现页面一个按钮点击后相当于键盘按下ctrl+shift+b的功能

JavaScript实现以下功能

![图片说明](https://img-ask.csdn.net/upload/201508/05/1438756625_715147.png) 点击以下 它就变成红色 松开就是原来的样子 这个用js怎么实现

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Python可以这样学(第四季:数据分析与科学计算可视化)

Python可以这样学(第四季:数据分析与科学计算可视化)

组成原理课程设计(实现机器数的真值还原等功能)

实现机器数的真值还原(定点小数)、定点小数的单符号位补码加减运算、定点小数的补码乘法运算和浮点数的加减运算。

javaWeb图书馆管理系统源码mysql版本

系统介绍 图书馆管理系统主要的目的是实现图书馆的信息化管理。图书馆的主要业务就是新书的借阅和归还,因此系统最核心的功能便是实现图书的借阅和归还。此外,还需要提供图书的信息查询、读者图书借阅情况的查询等

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

Java8零基础入门视频教程

Java8零基础入门视频教程

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

TTP229触摸代码以及触摸返回值处理

自己总结的ttp229触摸代码,触摸代码以及触摸按键处理

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

java jdk 8 帮助文档 中文 文档 chm 谷歌翻译

JDK1.8 API 中文谷歌翻译版 java帮助文档 JDK API java 帮助文档 谷歌翻译 JDK1.8 API 中文 谷歌翻译版 java帮助文档 Java最新帮助文档 本帮助文档是使用谷

Ubuntu18.04安装教程

Ubuntu18.04.1安装一、准备工作1.下载Ubuntu18.04.1 LTS2.制作U盘启动盘3.准备 Ubuntu18.04.1 的硬盘空间二、安装Ubuntu18.04.1三、安装后的一些工作1.安装输入法2.更换软件源四、双系统如何卸载Ubuntu18.04.1新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列...

快速排序---(面试碰到过好几次)

原理:    快速排序,说白了就是给基准数据找其正确索引位置的过程.    如下图所示,假设最开始的基准数据为数组第一个元素23,则首先用一个临时变量去存储基准数据,即tmp=23;然后分别从数组的两端扫描数组,设两个指示标志:low指向起始位置,high指向末尾.    首先从后半部分开始,如果扫描到的值大于基准数据就让high减1,如果发现有元素比该基准数据的值小(如上图中18&amp;lt...

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

HTML期末大作业

这是我自己做的HTML期末大作业,花了很多时间,稍加修改就可以作为自己的作业了,而且也可以作为学习参考

Python数据挖掘简易入门

Python数据挖掘简易入门

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

C++语言基础视频教程

C++语言基础视频教程

UnityLicence

UnityLicence

软件测试2小时入门

软件测试2小时入门

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

Python数据分析师-实战系列

系列课程主要包括Python数据分析必备工具包,数据分析案例实战,核心算法实战与企业级数据分析与建模解决方案实战,建议大家按照系列课程阶段顺序进行学习。所有数据集均为企业收集的真实数据集,整体风格以实战为导向,通俗讲解Python数据分析核心技巧与实战解决方案。

YOLOv3目标检测实战系列课程

《YOLOv3目标检测实战系列课程》旨在帮助大家掌握YOLOv3目标检测的训练、原理、源码与网络模型改进方法。 本课程的YOLOv3使用原作darknet(c语言编写),在Ubuntu系统上做项目演示。 本系列课程包括三门课: (1)《YOLOv3目标检测实战:训练自己的数据集》 包括:安装darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 (2)《YOLOv3目标检测:原理与源码解析》讲解YOLOv1、YOLOv2、YOLOv3的原理、程序流程并解析各层的源码。 (3)《YOLOv3目标检测:网络模型改进方法》讲解YOLOv3的改进方法,包括改进1:不显示指定类别目标的方法 (增加功能) ;改进2:合并BN层到卷积层 (加快推理速度) ; 改进3:使用GIoU指标和损失函数 (提高检测精度) ;改进4:tiny YOLOv3 (简化网络模型)并介绍 AlexeyAB/darknet项目。

超详细MySQL安装及基本使用教程

一、下载MySQL 首先,去数据库的官网http://www.mysql.com下载MySQL。 点击进入后的首页如下:  然后点击downloads,community,选择MySQL Community Server。如下图:  滑到下面,找到Recommended Download,然后点击go to download page。如下图:  点击download进入下载页面选择No...

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

董付国老师Python全栈学习优惠套餐

购买套餐的朋友可以关注微信公众号“Python小屋”,上传付款截图,然后领取董老师任意图书1本。

爬取妹子图片(简单入门)

安装第三方请求库 requests 被网站禁止了访问 原因是我们是Python过来的 重新给一段 可能还是存在用不了,使用网页的 编写代码 上面注意看匹配内容 User-Agent:请求对象 AppleWebKit:请求内核 Chrome浏览器 //请求网页 import requests import re //正则表达式 就是去不规则的网页里面提取有规律的信息 headers = { 'User-Agent':'存放浏览器里面的' } response = requests.get

web网页制作期末大作业

分享思维,改变世界. web网页制作,期末大作业. 所用技术:html css javascript 分享所学所得

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问
相关内容推荐