jquery tablesorter添加标题/工具提示以显示升序/降序
我正在使用jquery tablesorter。 我有一个像这里的表：
http://tablesorter.com/docs/
除非我希望每个列标题在用鼠标hover时都有标题/工具提示。 例如，名字的默认标题是“按名字排序”，然后它将变为“按升序排序”或“按降序排序”，依此类推。 我怎么能这样做，因为图像是在头部图像的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; } 我就是这样做的…为每个标题单元格设置一个数据标题，其中包含您要添加的文本。 但是，我们不会说“by”，“ascending”或“descending”，而是使用名为“{dir}”的可替换变量作为方向：
Last First Smith John Jones Timothy Wong Jin O'Brien Shaun Parker Peter
然后我们添加一个函数来遍历每个表头单元格，并根据它找到的类名更新标题。 调用它，并确保在每个表排序完成后调用它。
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();
这是一个工作演示 。