0

我正在使用 jQuery.tablesorter.js 来允许我在单击表格标题时对表格列进行排序。

但是，我需要能够在排序后将一个类添加到表的最后（底部）行。我有下面的代码，但这会将类添加到第一行（顶部），而不是最后一行。

我还能做些什么来确保我总是得到最后一行吗？

<html>
<head>
    <script language="JavaScript" src="../Generic/JAVASCRIPT/jquery.js" type="text/javascript"></script>
    <script language="JavaScript" src="../Generic/javascript/jquery.tablesorter.js" type="text/javascript"></script>
    <style>
        table{ border: 3px solid #000000;}
        th{ border-width: 2px; border-color: #000000; border-style: solid; background-color: #CFCFCF; color: #000000; }
        td{ border-width: 2px; border-color: #000000; border-style: solid; }
        td.lastRow{ background:red; }
    </style>
    <script>
        $(document).ready(function() 
            { 
                $("#STable").tablesorter();

                $('.header').click(function() 
                    { 
                        $('.lastRow').removeClass("lastRow");
                        $('.field1:last').addClass("lastRow");
                        $('.field3:last').addClass("lastRow");                          
                    }
                )
            } 
        );

    </script>
</head>


<body>
    <table id="STable">
        <thead>
            <tr>
                <th class="header ">FIELDx1</th>
                <th class="header headerSortDown">FIELDx2</th>
                <th class="header headerTopRight">FIELDx3</th>
            </tr>
        </thead>
        <tbody>
            <tr class="TableRow">
                <td class="field1" data-value="1">aaa</td>
                <td class="field2" data-value="1">111</td>
                <td class="field3" data-value="1">aaa111</td>
            </tr>
            <tr class="TableRow">
                <td class="field1" data-value="2">bbb</td>
                <td class="field2" data-value="2">222</td>
                <td class="field3" data-value="2">bbb222</td>
            </tr>
            <tr class="TableRow">
                <td class="field1 lastRow" data-value="3">ccc</td>
                <td class="field2" data-value="3">333</td>
                <td class="field3 lastRow" data-value="3">ccc333</td>
            </tr>
        </tbody>    
    </table>
</body>
</html>
4

1 回答 1

0

找到了答案：

$("#STable").bind("sortStart",function() 
    { 
        $(".TableRow td.field1:last").removeClass("lastRow");
        $(".TableRow td.field3:last").removeClass("lastRow"); 
    }
).bind("sortEnd",function() 
    { 
        $(".TableRow td.field1:last").addClass("lastRow");
        $(".TableRow td.field3:last").addClass("lastRow");
    }
);
于 2013-09-06T15:52:29.740 回答