0

私はこれを何度か書いたり書き直したりして、簡潔に保ちながら「適切な」背景を含めるようにしました. 運が悪いので、現在の状況を説明し、質問に答えます。

2 つの問題があるので、1 つをこの投稿に、もう 1 つを以前の投稿に掲載しました。

tbody タグまでハードコーディングされた動的テーブルがあります。tbody 内の行は、AJAX 呼び出しによって動的に生成されます。

(1) テーブルのゼブラ ストライプ、(2) テーブルの並べ替え、(3) 現在ホバーしている行を強調表示します。CSS でゼブラ ストライプを作成できますが、問題ありません。また、CSS を使用してハイライト行機能を (ある程度) 実現することもできます。

しかし、(jQuery の tablesorter を使用して) テーブル ソートが実装されている場合、行はスタイルを「再レンダリング」しないため、ゼブラ ストライプではなく、明るい灰色の行と白い行の塊になってしまいます。

さらに、行の強調表示は、この方法でアプローチした場合、白い行 (CSS クラスが適用されていない) でのみ機能します。

先週は解決策を提供する記事をいくつか見つけたと思っていましたが、今日は見つけられないようです。そして、私が Web で見つけたものはすべて、実装または機能に許容できない不具合がありました。

現在のコードは次のとおりです。

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

私が得ているエラーは、示されたコード行にあります。エラーは次のとおりです。

SyntaxError: 引数リストの後に ) がありません

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 に答える