データグリッドに交互に行の色を表示する

Question

jqueryを使って別の背景色で代替の行を表示する方法を簡単に教えてもらえますか？ foreachループで試してみましたが、運がまったくありません。どうもありがとう！！！

<div class="acgridhdrstart">Account Name</div> 
<div class="acgridhdr">Account Region</div> 
<div class="acgridhdr">Account Representative</div> 
<div class="acgridhdr">Peer Partner</div> 
<div class="acgridhdr">Last Updated</div> 
@while (myreader.Read()) 
{ 
<div class="bgcol"> 
<span class="acgridstart">@myreader["acname"]</span> 
<span class="acgrid">@myreader["acregion"]</span> 
<span class="acgrid">@myreader["acrep"]</span> 
<span class="acgrid">@myreader["acpeer"]</span> 
<span class="acgrid">@myreader["lastupdated"]</span> 
</div> 
} 

Answer 1

を持っている私は、SqlDataAdapterオブジェクトを使用して終了し、次のようにデータが返されました：

@for (int i = 0; i < dt.Rows.Count; i++) 
{ 
    string rowclass = "bgcol"; 
    if (i % 2 == 0) 
    { 
     rowclass = "bgalt"; 
     } 
     else 
     { 
      rowclass = "bgcol"; 
     } 
<div class="@rowclass"> 
<span class="acgridstart">@dt.Rows[i]["acname"].ToString()</span> 
<span class="acgrid">@dt.Rows[i]["acregion"].ToString()</span> 
<span class="acgrid">@dt.Rows[i]["acrep"].ToString()</span> 
<span class="acgrid">@dt.Rows[i]["acpeer"].ToString()</span> 
<span class="acgrid">@dt.Rows[i]["lastupdated"].ToString()</span> 
</div> 
} 

Answer 2

あなたは、あなたがこの効果を達成するために簡単にCSSを使用することができますいずれかの「偶数」または「奇数」クラスでマークアップの各行を書くことができます。それ以外の場合は、jQueryのようなものを使用して、ストライプスタイルに対応する適切な "偶数"クラスと "奇妙な"クラスを追加する必要があります。ことができますCSS3で

Answer 3

：n番目の子（偶数）と：

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

n番目の子（奇数）jQueryのバージョン、FWIW：

http://api.jquery.com/nth-child-selector/

あなたがそれをしたい場合ビューコードで、Phil HaackのCycleメソッドが便利かもしれません。

http://haacked.com/archive/2008/08/07/aspnetmvc_cycle.aspx

0あなたはそれについて知っていないオフのチャンスで

、WebGridのはrowStyleとalternatingRowStyle

http://msdn.microsoft.com/en-us/magazine/hh288075.aspx

http://msdn.microsoft.com/en-us/library/system.web.helpers.webgrid.gethtml(v=vs.99).aspx

Answer 4

このように：

<script type="text/javascript"> 
    $(function() { 
     $('#yourtable tr:odd').css('background-color', '#cccccc'); 
    }); 
</script>