0

我正在创建一个电子邮件日志来报告我的应用程序的活动。

该表工作正常，但是当输出数百条记录时，很难阅读。

这是我现有的代码（我循环通过 ac# 数据表来获取记录）

foreach (task_creditcases item in creditCases)
{
    sb.Append("<tr>");
    // Document Name
    sb.Append("<td>" + item.c_Id + "</td>");
    sb.Append("<td>" + item.c_Name + "</td>");
    sb.Append("<td>" + "Credit Case" + "</td>");
    sb.Append("<td>" + "Credit Case" + "</td>");
    sb.Append("<td>" + item.c_EquationCustomerNumber + "</td>");
    sb.Append("<td>" + item.c_AdditionalInfo + "</td>");
    sb.Append("<td>" +  Convert.ToDateTime(item.c_Close_Date__c).ToString("dd/MM/yyyy") + "</td>");
    sb.Append("<td>" + item.c_ImagingDocument + "</td>");
    sb.Append("<td>" + item.c_ContentType + "</td>");
    sb.Append("<td>" + item.c_Status__c + "</td>");
    sb.Append("<td>" + item.c_Document_Type__c + "</td>");
    sb.Append("<td>" + item.c_ImagingDSXDirectory + "</td>");
    sb.Append("<td>" + item.c_ImagingDocument + "</td>");
    sb.Append("</tr>");
}

sb.Append("</tbody>");
sb.Append("</table>");

如何为每隔一行添加背景底纹？

谢谢菲利普

4

4 回答 4

7 
tbody tr:nth-child(even) {
   background-color: #bada55;
}

tbody tr:nth-child(odd) {
   background-color: lightblue;
}

Codepen 演示

于 2013-10-17T14:50:51.160 回答
3 
tr:nth-child(odd) {background: #FFF}

or

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

根据偶数行或单行数，将其中之一添加到您的 CSS 中。

于 2013-10-17T14:50:32.793 回答
3

跨浏览器解决方案


选项 1：jQuery

如果您不打算支持 IE8 或更低版本，那么nth-child选择器将不适合您。但是，使用 jQuery，您可以简单地添加以下内容，因为 jQuery 确实支持nth-child. 或者，在 jQuery 中，您可以使用:evenand :odd。不过，您需要弄清楚何时调用它。

$("tbody > tr:even" ).css("background-color", "blue");
$("tbody > tr:odd" ).css("background-color", "red");


选项 2：没有 jQuery

或者从你的代码有：

var count = 0;
foreach (task_creditcases item in creditCases)
{
    if (count++ % 2 == 0)
        sb.Append("<tr class=\"even\">");
    else
        sb.Append("<tr class=\"odd\">");

    // Rest of sb.code
}

然后在你的CSS文件中添加：

tbody > tr.odd { background-color: red; }
tbody > tr.even { background-color: blue; }

我推荐第二个选项，因为您不必触摸内联样式的 jQuery。如果样式在 CSS 与内联中，性能会更好。

于 2013-10-17T15:02:18.940 回答
0

谢谢大家，

这是我在看到jumpingcode的答案之前所做的：

    foreach (task_cases item in cases)
            {
                //sb.Append("<tr>");
                var idx = 0;

                bool even = idx % 2 == 0;
                if (even)
                    {
                    sb.Append("<tr background-color:#eee;>");
                    }
                else
                    {
                    sb.Append("<tr background-color:#fff;>");
                    }
于 2013-10-17T17:04:22.723 回答