Question

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

该表正在运行finr但是当输出数百条记录时，很难阅读。

这是我现有的代码（我循环使用c＃datatable来获取记录）

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>");

如何为每隔一行添加背景阴影？

感谢菲利普

Answer 1

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

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

Codepen Demo

Answer 2

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

or

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

将其中一个添加到您的css中，具体取决于偶数行或一行。

Answer 3

跨浏览器解决方案

选项1：jQuery

如果您不打算支持IE8或更低版本，那么nth-child选择器将不适合您。但是，使用jQuery可以简单地添加以下内容，因为jQuery支持nth-child。或者，在jQuery中，您可以使用:even和: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 vs inline中，性能会更好。

Answer 4

谢谢大家，

这是我在看到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;>");
                    }

将备用背景样式添加到HTML表的奇数行

4 个答案:

跨浏览器解决方案

选项1：jQuery

选项2：没有jQuery