如何使用jquery对行进行排序

使用jQuery对行进行排序可以通过以下步骤实现：

引入jQuery库：在HTML文件中的<head>标签内，通过以下代码引入jQuery库文件。

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

你也可以将jQuery库文件下载到本地，然后通过相对路径引入。

HTML表格准备：创建一个包含需要排序的表格的HTML结构，给每个要排序的列添加一个唯一的类名，例如"sort-by-name"和"sort-by-age"。

<table id="my-table">
   <thead>
      <tr>
         <th class="sort-by-name">Name</th>
         <th class="sort-by-age">Age</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John</td>
         <td>25</td>
      </tr>
      <tr>
         <td>Jane</td>
         <td>30</td>
      </tr>
      <!-- 其他行... -->
   </tbody>
</table>

编写排序逻辑：使用jQuery选择器选中需要排序的表格列，并通过点击列标题时触发的事件来实现排序。

$(document).ready(function() {
   $('.sort-by-name').click(function() {
      sortTable('name');
   });
   
   $('.sort-by-age').click(function() {
      sortTable('age');
   });
});

function sortTable(columnName) {
   var table = $('#my-table');
   var rows = $('tbody tr', table).toArray();

   rows.sort(function(rowA, rowB) {
      var valueA = $('td', rowA).eq(getColumnIndex(columnName)).text().toUpperCase();
      var valueB = $('td', rowB).eq(getColumnIndex(columnName)).text().toUpperCase();

      if (valueA < valueB) {
         return -1;
      } else if (valueA > valueB) {
         return 1;
      } else {
         return 0;
      }
   });

   $.each(rows, function(index, row) {
      table.append(row);
   });
}

function getColumnIndex(columnName) {
   var columnIndex = -1;
   $('#my-table th').each(function(index) {
      if ($(this).hasClass('sort-by-' + columnName)) {
         columnIndex = index;
         return false;
      }
   });
   return columnIndex;
}

CSS样式：为当前排序的列标题添加样式以示区分。

.sort-asc:after {
   content: ' ↑';
}

.sort-desc:after {
   content: ' ↓';
}

在HTML文件中的<head>标签内添加以下代码引入CSS样式文件：

<style>
   .sort-by-name:after, .sort-by-age:after {
      content: '';
   }
   .sort-by-name.sort-asc:after, .sort-by-age.sort-asc:after {
      content: ' ↑';
   }
   .sort-by-name.sort-desc:after, .sort-by-age.sort-desc:after {
      content: ' ↓';
   }
</style>

完整代码演示：

<!DOCTYPE html>
<html>
<head>
   <title>Sorting Table with jQuery</title>
   <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
   <style>
      .sort-by-name:after, .sort-by-age:after {
         content: '';
      }
      .sort-by-name.sort-asc:after, .sort-by-age.sort-asc:after {
         content: ' ↑';
      }
      .sort-by-name.sort-desc:after, .sort-by-age.sort-desc:after {
         content: ' ↓';
      }
   </style>
</head>
<body>
   <table id="my-table">
      <thead>
         <tr>
            <th class="sort-by-name">Name</th>
            <th class="sort-by-age">Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John</td>
            <td>25</td>
         </tr>
         <tr>
            <td>Jane</td>
            <td>30</td>
         </tr>
         <!-- 其他行... -->
      </tbody>
   </table>

   <script>
      $(document).ready(function() {
         $('.sort-by-name').click(function() {
            sortTable('name');
         });

         $('.sort-by-age').click(function() {
            sortTable('age');
         });
      });

      function sortTable(columnName) {
         var table = $('#my-table');
         var rows = $('tbody tr', table).toArray();

         rows.sort(function(rowA, rowB) {
            var valueA = $('td', rowA).eq(getColumnIndex(columnName)).text().toUpperCase();
            var valueB = $('td', rowB).eq(getColumnIndex(columnName)).text().toUpperCase();

            if (valueA < valueB) {
               return -1;
            } else if (valueA > valueB) {
               return 1;
            } else {
               return 0;
            }
         });

         $.each(rows, function(index, row) {
            table.append(row);
         });
      }

      function getColumnIndex(columnName) {
         var columnIndex = -1;
         $('#my-table th').each(function(index) {
            if ($(this).hasClass('sort-by-' + columnName)) {
               columnIndex = index;
               return false;
            }
         });
         return columnIndex;
      }
   </script>
</body>
</html>

上述代码使用jQuery实现了对表格中的行进行排序，点击列标题可以根据该列的值对表格行进行升序或降序排序。你可以根据具体需要自行修改和扩展代码，例如支持更多列的排序。

该方法适用于简单的表格排序需求，如果需要对大型数据表格进行排序或有更复杂的排序需求，可以考虑使用其他功能更强大的库或插件。

此外，腾讯云相关产品中没有专门与jQuery排序相关的产品或服务，因此无法提供相应的推荐产品和链接。

JQuery表排序；动态添加行的问题

、

我正在使用一个jquery表排序插件()来排序我的表。这适用于已经创建的行。但是，当我使用Jquery clone()方法动态添加一行时，排序不起作用。即使我动态添加了一行，我应该如何对行进行排序？

浏览 0提问于2010-09-16得票数 4

回答已采纳

2回答

如何从jqgrid中仅使用一列拖放行？

、、、

我尝试仅使用一个特定的列对jqgrid行进行重新排序。目前，行可以按任何列重新排序。我的设置如下： update: function (ev, ui) {SaveRowSorting(); }); 但是上面的代码允许按所有列对行进行重新排序

浏览 0提问于2010-11-22得票数 0

1回答

使用jQuery表排序器修复行位置或忽略行

我使用jQuery和tablesorter插件对表进行排序。一切都很棒，但我想每隔5行左右插入几行，并让这些行保持在该位置，无论表是如何排序的。我在谷歌上到处搜索，什么也没找到。我在想也许可以使用隐藏的表行和强制排序，但我不确定我将在行中放入什么，或者如何对其排序(升序与降序)。

浏览 3提问于2009-07-06得票数 0

回答已采纳

1回答

对jQuery* TreeTable的节点进行排序*

、、

我正在使用jQuery 插件来显示表格数据树，这真的很好用。使用jQuery UI的draggable & droppable允许将节点拖放到父节点上，就像在TreeTable的中一样。这使用TreeTable的appendBranchTo方法。这一切都很好用，除了它不允许对项目进行排序。对单个项目进行排序应该(我希望)相对容易，因为这只意味着对一些tr元素进行<

浏览 3提问于2012-04-19得票数 1

回答已采纳

1回答

超过3000个数据行的Jquery表排序程序速度慢的问题

、、、

我使用Jquery表排序器对我的数据进行排序。目前我的数据库表有超过3000行当使用jquery表排序程序加载此数据(php/mysql)时，页面变慢，我能为它做些什么，我正在使用jquery或mysql/php搜索解决方案？目前，我每页加载20行谢谢

浏览 2提问于2013-09-06得票数 0

2回答

可排序工作，1.7.2，但不使用1.11.2

、、、

我使用可排序的函数来对某些文本区域进行排序(我希望能够对文本区域进行排序，并对这些文本区域内的文本进行着色)。当使用1.7.2版本的jQuery时，它工作得很好，但是当使用jQuery 1.11.2时，它就不再工作了这里代码的第29行，第

浏览 3提问于2015-08-06得票数 0

回答已采纳

1回答

JavaScript表行-删除，通过数组进行排序，回到正确的位置

、

我正在为我的工作场所制作一个基本的web应用程序，其中一个PHP脚本从一个sql数据库中检索数千行，并将数据放在一个JavaScript对象中，让我在前端进行控制。我做了以上所有的事情，没问题。我可以用特定的类名检索所有的类，没有问题，然后将每个s的innerHTML存储在数组中，并对其进行排序，但是如何从表中删除它们所在的行，对相对于s innerHTML的行进行排序，然后将行放回表中？同样，我

浏览 2提问于2014-04-03得票数 0

1回答

修改行索引javascript

、、

我有一个能够对列进行排序的表，它运行得很好。我打算根据父行(而不是子行结果)对行进行排序，否则表会变得一团糟。我尝试使用jQuery来，在排序之前删除所有子行，并在排序函数之后追加它们，但是列的排序函

浏览 2提问于2019-11-15得票数 0

1回答

HTML/JQuery对子表进行排序并使某些行不可排序？

、、、、

布局:一个表，其中的行有一个“展开”按钮。expand按钮显示该行的所有子行，所有子行都与父行共享一些公共数据。到目前为止，我已经有了扩展子行的表，但是我不能理解如何使孩子可以在父级之间拖动。我也不希望能够对父行重新排序，它们应该是静态的。该表是动态创建的，数据是从数据库中获取的。> </table> 用于展开隐藏

浏览 3提问于2012-08-23得票数 0

2回答

数据表在排序后获取行位置

、

我使用的是带有分页、排序的jQuery数据存储插件。提供给用户的数据不止一页。Datatables数据定期使用ajax数据源进行刷新。我从数据库中选择行，并在经过一段时间后对该行进行更改，因为由于排序而存在分页，所选行可能会滑到其他页，并且对用户来说变得不可见，除非他滚动到他的条目所在的页面。我试过使用fnGetPosition()，但它只显示了tr在aaData源代码中的位置。

浏览 3提问于2011-11-11得票数 2

3回答

JS jQuery* -使HTML表列可排序(通过拖放)*

、、、

我有一个非常简单的超文本标记语言表格，其中应用了jQuery排序，以便用户可以通过拖放重新排序行：任何好的想法，无论是使用js，jQuery还是仅仅是概念性的。

浏览 2提问于2012-02-26得票数 1

回答已采纳

1回答

获取表行对并使用JQuery进行排序

、

如何使用javascript或jquery将表中的行成对放入变量中？在那之后，我想在桌子上做一个简单的排序。</tbody>对于每个访问者只有一行的表，我有这个javascript可以工作。$table.append(row); e.preventDefault();通过选择像tr:nth-child(4n), tr:nth-child(4n-1)这样的行对</em

浏览 0提问于2013-05-25得票数 0

回答已采纳

2回答

jquery对行和值进行排序

、、

单击向上或向下操作顺序时，如何更改输入值以增加或减少值(1.2.3.4...)价值观？另外，如何添加另一个按钮来删除行？

浏览 2提问于2011-08-16得票数 0

回答已采纳

1回答

修复jQuery表排序器标题行

、、

所以，我有一个表，我想用jQuery表排序插件对它进行排序。如果我将所有内容--列标题和数据都放到一个表中--排序就会非常简单。但是，如果我的表中有很多行，我希望数据行位于整理div中。关于如何修复标题行有什么想法吗？非常感谢！

浏览 1提问于2011-08-05得票数 0

1回答

如何使用jquery排序表选择多个行并对它们进行排序

} background-color: green; background-color: #abcdef; 如何通过插入在特定行索引处选定的行对表进行排序

浏览 5提问于2014-02-28得票数 5

回答已采纳

1回答

手动排序表行jQuery插件

、、

我有表行作为菜单选项卡的界面。我必须提供界面手动排序表行的jQuery插件，以便我可以保存标签顺序和显示根据。请推荐我手动排序表行的jQuery插件。更新：通过单击列名对列名进行排序。

浏览 1提问于2012-02-07得票数 2

回答已采纳

1回答

使用jQuery根据点击事件更改表格行的背景色

、

当准备好对文档进行操作时，jQuery会为每个偶数行添加一个类，为每个奇数行添加一个类，以便直观地看到不同的行。但是，每当我更新(基于标题排序)行时，无论我尝试什么，它们都不会更新。

浏览 2提问于2009-12-28得票数 1

1回答

对2行jQuery进行测序

、、、

我有以下几行jQuery代码：stop: function(event, ui) { settings.stop.apply(this);我不希望settings.stop.apply(this);在上面的代码行(使用jQuery，我如何对这两行<

浏览 3提问于2010-05-24得票数 1

回答已采纳

2回答

使用jquery，如何根据TR属性对表中的行进行重新排序？

、

我有一个表，其中的行如下所示。这些行通过jquery调用不时更新。使用jquery，我如何构造一个函数，根据myAttribute值将最高的myAttribute值行放在顶部，将最低的myAttribute值行放在底部，对这些表行进行重新排序？表中最多可以有100行。

浏览 0提问于2010-07-01得票数 13

回答已采纳

1回答