Question

我已经尝试过多次写作和重写，以保持简洁，但包含“相关”背景。没有运气，所以我会提出现状并回答问题。

我有两个问题，所以我在这篇文章中放了一个，另一个放在上一篇文章中。

我有一个动态表，硬编码到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）

Answer 1

我会选择tr:nth-child：

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

不需要JS。也是徘徊：

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

Answer 2

*我相信我已经解决了这个问题我相信我已经解决了所有这些问题！

在我的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"); } 
);

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

2 个答案: