集成jQuery tablesorter，斑马条纹和行突出显示

我已经尝试过写和重写这几次，以保持简短，但包括“相关”的背景。没有运气，所以我要按照问题回答当前的情况并回答问题。集成jQuery tablesorter，斑马条纹和行突出显示

我有两个问题，所以我已经把一个在这篇文章中，另一个在一前一后。

我有一个动态表是硬编码到了TBODY标签。 tbody中的行是由AJAX调用动态生成的。

我需要能够（1）斑马条纹表;，（2）对表进行排序; （3）突出显示当前悬停的行。我可以用CSS做斑马条纹，没问题。我也可以使用CSS完成突出显示行功能（有点）。

但是，当实施表格排序（使用jQuery的tablesorter）时，行不会“重新渲染”样式，所以我最终得到的是灰色的行和白色的行，而不是斑马条纹。

此外，该行突出只适用于白行走近这种方式时（没有应用CSS类）。

我想我发现了一些文章，将提供上周的解决方案，但似乎我今天不能找到他们。而且我在网上找到的所有内容在实现或功能上都有一些不可接受的小问题。

下面是代码，因为它目前为：

$("#resultsTbody").html(response); 
$("#resultsTbl").tablesorter(); 
var $rows = $(".stripeMe tbody tr"); 
$rows.hover(
    function() { $(this).addClass("currRow"); } // <--- error flagged here 
    function() { $(this).removeClass("currRow"); } 
);

这我得到的错误是代码的指示线。错误是：

SyntaxError: missing) after argument list

来源

2012-09-17 CoMo G-Dawg

好吧，我发现这个代码错误的问题 - 我的紧张，不那么年轻的眼睛之后。指定行末尾需要有一个逗号。修正了。至于条纹/突出显示/排序工作不好，我仍然失去。 –

如果你解决了你自己的问题，请使用下面的表格添加你自己的答案，然后标记为选定的答案。 – Dai

*我认为我已经解决了这个* 我相信我已经解决了这一切！

增加了以下我的CSS

.odd{ background: #DDDDDD; } 
.even{ background: #FFFFFF; }

发现，在文档上的小部件一个不起眼位点点。

然后我的脚本的其余部分是这样进行的

$(".stripeMe").tablesorter({ widgets: ['zebra'] }); 
var $rows = $(".stripeMe tbody tr"); 
$rows.hover(function(){ 
    $(this).addClass("currRow"); 
    $(this).css("cursor","pointer"); }, 
function(){ 
    $(this).removeClass("currRow"); 
    $(this).css("cursor","auto"); } 
);

来源

2012-09-19 11:55:39

我只是用tr:nth-child去：

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF}

不需要JS。另外，徘徊：

tr:hover{ cursor:pointer; background:#EEE}

来源

2012-09-17 17:49:31 moonwave99

感谢您的反馈。我试过这些。像这样的CSS一直工作直到表格被排序，然后它对我来说都变得不可思议了。行与他们一起进行类。而且，正如指出的那样，获取行更改的CSS仅适用于没有已分配另一个类的行 - 或只有一半行。 –

[它甚至可以在排序时工作]（http://jsfiddle.net/AmSdb/） - 摆脱所有'.odd'和'.even'类。 – moonwave99

CSS是一个更好的答案。要删除奇数和偶数类名，请在此选项中清除类名：'widgetZebra：{css：[“”，“”]}' – Mottie

集成jQuery tablesorter，斑马条纹和行突出显示

回答

相关问题