0

我已经尝试多次编写和重写，以保持简短，但包括“相关”背景。没有运气，所以我将给出当前情况并按要求回答问题。

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

我有一个动态表，它被硬编码到 tbody 标签。tbody 内的行由 AJAX 调用动态生成。

我需要能够（1）对表格进行斑马条纹；（2）对表格进行排序；(3) 突出显示当前悬停的行。我可以用 CSS 做斑马条纹，没问题。我也可以用 CSS 完成高亮行功能（在某种程度上）。

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

另外，当以这种方式接近时，行突出显示仅适用于白色行（未应用 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 ) 在参数列表之后

4

2 回答 2

2

我只是去tr:nth-child：

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

不需要JS。还有悬停：

 tr:hover{ cursor:pointer; background:#EEE}
于 2012-09-17T17:49:31.373 回答
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"); } 
);
于 2012-09-19T11:55:39.307 回答