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

本文关键字：备用 颜色 显示 数据 数据网 网格 | 更新日期: 2023-09-27 18:21:38

有人能帮助jquery提供一种快速的替代方法，以显示具有不同背景色的替代行吗？试着用前臂绕圈，但运气不太好。非常感谢！！！

    <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>
}

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

使用CSS3，您可以：第n个子（偶数）和：第n子（奇数）

http://www.w3.org/TR/css3-selectors/#nth-子伪

jQuery版本，FWIW:

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

如果你想在视图代码中使用它，Phil Haack的Cycle方法可能是有用的

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

如果你不知道的话，WebGrid有rowStyle和交替的rowStyle

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

如果您可以用"偶数"或"奇数"类编写每行标记，那么您可以轻松地使用CSS来实现这种效果。否则，您将需要使用类似jQuery的东西来添加与条纹样式相对应的适当的"偶数"answers"奇数"类。

像这样：

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

我最终使用了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>
}
相关文章：