集成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，斑馬條紋和行突出顯示

回答

相關問題