js拖动table行tr排序

最新推荐文章于 2025-09-10 02:09:43 发布

原创最新推荐文章于 2025-09-10 02:09:43 发布 · 7.6k 阅读

0 ·

CC 4.0 BY-SA版权

网络专栏收录该内容

19 篇文章

订阅专栏

本博客介绍如何使用jQuery和jQueryUI实现手动拖动HTML表格中的行进行排序的功能，包括HTML表格的引入、关键JavaScript代码解析以及相关回调函数的作用。

实现手动拖动html table中的行(tr)进行排序.

HTML

需要引入jquery和jquery ui的js文件

<table id="sort" class="grid" title="Kurt Vonnegut novels">
    <thead>
        <tr><th class="index">No.</th><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td class="index">1</td><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td class="index">2</td><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td class="index">3</td><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td class="index">4</td><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td class="index">5</td><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

javascript:

 
         var 
         fixHelperModified = 
         function
         (e, tr) {
        
         var 
         $originals = tr.children();
        
         var 
         $helper = tr.clone();
        
         $helper.children().each(
         function
         (index) {
        
         $(
         this
         ).width($originals.eq(index).width())
        
         });
        
         return 
         $helper;
        
         },
        
         updateIndex = 
         function
         (e, ui) {
        
         $(
         'td.index'
         , ui.item.parent()).each(
         function 
         (i) {
        
         $(
         this
         ).html(i + 1);
        
         });
        
         };
        
         $(
         "#sort tbody"
         ).sortable({
        
         helper: fixHelperModified,
        
         stop: updateIndex
        
         }).disableSelection();