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

使用CSS3，您可以：nth-child（偶数）和：nth-child（odd）

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

Answer 2

如果您可以使用“偶数”或“奇数”类编写每个行标记，那么您可以轻松地使用CSS来实现此效果。否则，您需要使用类似jQuery的东西来添加与您的条带样式相对应的相应“偶数”和“奇数”类。

Answer 3

像这样：

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

Answer 4

我最终使用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>
}

在数据网格中显示备用行颜色

4 个答案: