Question

我正在使用jquery tablesorter。我有一张像这样的桌子：

除非我希望每个列标题在用鼠标悬停时都有标题/工具提示。例如，名字的默认标题是“按名字排序”，然后它将变为“按升序排序”或“按降序排序”，依此类推。我怎么能这样做，因为图像在标题图像的css中而不是在每一个上设置？

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。

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

1 个答案: