在數據網格中顯示交替行顏色

有人可以幫助快速替代方式來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> 
}

來源

2012-01-29 mynameisneo

只是爲了確保我解析正確的問題，你不想使用jQuery？如果不是，我可以問爲什麼不呢？ – 2012-01-29 02:48:36

我結束了使用的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> 
}

來源

2012-01-29 09:20:08 mynameisneo

如果你能寫各行必須是「連」或「奇」類的標記，那麼你可以使用CSS容易達到這種效果。否則，您需要使用類似jQuery的東西來添加與您的條紋樣式相對應的適當的「偶數」和「奇數」類。

來源

2012-01-29 00:56:14

謝謝！你介意發佈代碼示例嗎？ – mynameisneo 2012-01-29 01:01:07

有了CSS3，你可以：第n個孩子（偶數）：第n個孩子（奇）

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

jQuery的版本，FWIW：

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

如果你想讓它在查看代碼中，Phil Haack的Cycle方法可能有用

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

在你不知道它關閉的機會，擁有的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

來源

2012-01-29 02:51:25

詹姆斯，感謝您花時間寫出如此全面的答案！我在下面給出了一個不同的解決方案，並給了你一個贊成:-)。 – mynameisneo 2012-01-29 04:46:44

像這樣：

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

來源

2012-01-29 21:37:49 jgauffin

在數據網格中顯示交替行顏色

回答

相關問題