jquery tablesorter 添加标题/工具提示以显示升序/降序

Question

我正在使用 jquery 表排序器。我有一张像这里的桌子：

http://tablesorter.com/docs/

除了我希望每个列标题在鼠标悬停时都有一个标题/工具提示。例如，名字的默认标题将是“按名字排序”，然后它将更改为“对名字进行升序排序”或“对名字进行降序排序”，依此类推。由于图像在标题图像的 css 中，而不是在每个 th 上设置，我该怎么做？

table.tablesorter thead tr .headerSortDown {          background-image: url(desc.gif);  } 
table.tablesorter thead tr .headerSortUp {          background-image: url(asc.gif);  } 
table.tablesorter thead tr .header {          background-image: url(bg.gif);          background-    repeat: no-repeat;          background-position: center right;          cursor: pointer;  } 

Answer 1

这就是我的做法...为每个标题单元格设置一个数据标题，其中包含您要添加的文本。但不是说“by”、“ascending”或“descending”，我们将使用一个名为“{dir}”的可替换变量来表示方向：

<table class="tablesorter">
     <thead>
         <tr>
             <th data-title="sort {dir} last name">Last</th>
             <th data-title="sort {dir} first name">First</th>
         </tr>
     </thead>
     <tbody>
         <tr><td>Smith</td><td>John</td></tr>
         <tr><td>Jones</td><td>Timothy</td></tr>
         <tr><td>Wong</td><td>Jin</td></tr>
         <tr><td>O'Brien</td><td>Shaun</td></tr>
         <tr><td>Parker</td><td>Peter</td></tr>        
     </tbody>
 </table>

然后我们添加一个函数来遍历每个表格标题单元格并根据它找到的类名更新标题。调用它，并确保在每个表排序完成后调用它。

var table = $('table'),

    updateTitles = function(){
        var t, $this;
        table.find('thead th').each(function(){
            $this = $(this);
            t = "by";
            if ($this.hasClass('headerSortUp')) {
                t = "ascending";
            } else if ($this.hasClass('headerSortDown')) {
                t = "descending";
            }
            $this.attr('title', $this.attr('data-title').replace(/\{dir\}/, t) );
        });
    };

table.tablesorter();

// bind to sort events 
table.bind("sortEnd",function() { 
    updateTitles(); 
});
// set up titles
updateTitles();

这里是working demo。