在数据网格中显示交替行颜色

有人可以帮助快速替代方式来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

在数据网格中显示交替行颜色

回答

相关问题