logo标签列表

交替行颜色 MVC

c#asp.net-mvcasp.net-mvc-3asp.net-4.0
6

我需要设计一张有交替行颜色的表格。以下是编写的代码，但它并没有起作用。可能与MVC有语法问题。请给出建议。

@for (int i = 1; i <= 10; i++)

{

        var rowColor = "D9E6C4";
        <tr style="background-color:@rowColor;" >
            <td>apoorva</td>
        </tr>
        if (@rowColor.Equals("#ffffff"))
        {
            rowColor = "#D9E6C4";
        }
        else
        {
            rowColor = "#ffffff";
        }
}
你知道jQuery或者会使用JavaScript吗？ - MethodMan
6
为什么不直接使用CSS呢？ - slinzerthegod
可能是如何在HTML表格上创建斑马线，而不使用JavaScript和奇偶类生成？的重复问题。 - tereško
8个回答
13
10
请问需要翻译成英文吗？
@for (int i = 1; i <= 10; i++)
{
    string rowColor;
    if(i % 2 == 0)
    {
        rowColor = "D9E6C4";
    }
    else
    {
        rowColor = "ffffff";
    }
    <tr style="background-color:#@rowColor;" >
        <td>apoorva</td>
    </tr>
}
5

您应该使用:

    if (rowColor.Equals("#ffffff"))
    {
        rowColor = "#D9E6C4";
    }
    else
    {
        rowColor = "#ffffff";
    }

一种替代方法是使用模块来选择颜色：
    <tr style='background-color:@(i%2 == 0 ? "#D9E6C4":"#ffffff"  );'>
        <td>apoorva</td>
    </tr>
5
将 rowColor 的声明放到 for 循环之外。
@{ var rowColor = "D9E6C4"; }
@for (int i = 1; i <= 10; i++)
{
    <tr style="background-color:@rowColor;" >
        <td>
            apoorva
        </td>
    </tr>
    if (@rowColor.Equals("#ffffff"))
    {
        rowColor = "#D9E6C4";
    }
    else
    {
        rowColor = "#ffffff";
    }
}
3

在你的样式表中使用CSS

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

3
这似乎是一个相当基本的错误：每次循环时，您都在设置该值。只需将初始设置移到循环外部即可：
var rowColor = "#D9E6C4";
@for (int i = 1; i <= 10; i++)
{
    <tr style="background-color:@rowColor;" >
        <td>apoorva</td>
    </tr>
    if (@rowColor.Equals("#ffffff"))
    {
        rowColor = "#D9E6C4";
    }
    else
    {
        rowColor = "#ffffff";
    }
}

编辑：@jcreamer898 建议使用 i%2 比检查颜色值更好。
编辑：用与if条件中相同的值初始化初始变量。
2
<html>
    <head>
        <title>Example Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('tr:even').addClass('alt-row-class');
            });
        </script>
    </head>
    <body>...</body>
</html>

然后使用标准 CSS 将样式应用于该类：

.alt-row-class { background-color: green; }

参考此前的帖子 - https://stackoverflow.com/posts/663122/edit

1
@{

 string rowColor = "#D9E6C4";   
 <table>
@for (int i = 1; i <= 10; i++)
{
        <tr style="background-color:@rowColor;" >
            <td>apoorva</td>
        </tr>
       rowColor = rowColor == "#D9E6C4" ? "#FFFFFF" : "#D9E6C4";
}
</table>
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接