首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery在没有插件的情况下对表进行排序

在没有插件的情况下,可以使用 jQuery 对表格进行排序。以下是一个简单的示例,演示如何使用 jQuery 对表格进行排序:

  1. 首先,确保已经在 HTML 文件中引入了 jQuery 库:
代码语言:html<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
复制
  1. 创建一个简单的表格:
代码语言:html<table id="myTable">
复制
 <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>分数</th>
    </tr>
  </thead>
 <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>80</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>28</td>
      <td>90</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>75</td>
    </tr>
  </tbody>
</table>
  1. 使用 jQuery 对表格进行排序:
代码语言:javascript
复制
$(document).ready(function() {
  $('#myTable th').click(function() {
    var table = $(this).parents('table').eq(0);
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
    this.asc = !this.asc;
    if (!this.asc) {
      rows = rows.reverse();
    }
    for (var i = 0; i< rows.length; i++) {
      table.append(rows[i]);
    }
  });
  function comparer(index) {
    return function(a, b) {
      var valA = getCellValue(a, index);
      var valB = getCellValue(b, index);
      return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
    }
  }
  function getCellValue(row, index) {
    return $(row).children('td').eq(index).text();
  }
});

这段代码会在表头点击时,根据点击的列对表格进行排序。可以根据需要修改代码以满足特定需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

25分23秒

第 3 章 无监督学习与预处理(2)

14分28秒

jQuery教程-01-$是函数名

12分40秒

13分钟详解Linux上安装Vim插件—YouCompleteMe:文本编辑更强大和清爽

1分23秒

3403+2110方案全黑场景测试_最低照度无限接近于0_20230731

6分33秒

088.sync.Map的比较相关方法

13分32秒

10分钟学会零基础搭建CS GO服务器并安装插件,开设自己的游戏对战

14分29秒

15分钟详解Linux/macOS上安装LunarVim:快速配置NeoVim,打造终端IDE

44分32秒

【玩转腾讯云】信息安全人人有责!(腾讯微云这样玩,信息才安全!)

2分16秒

Tenable简介

8分40秒

10分钟学会一条命令轻松下载各大视频平台视频:yt-dlp的安装配置与使用

8分0秒

云上的Python之VScode远程调试、绘图及数据分析

1.7K
9分12秒

运维实践-在ESXI中使用虚拟机进行Ubuntu22.04-LTS发行版操作系统与密码忘记重置

领券