为HTML表的奇数行添加备用背景样式 [英] add alternate background style to odd rows of HTML table

问题描述

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

I am creating an email log to report on activities of my application.

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

The table is working finr but when hundreds of records are output it is difficult to read.

这是我现有的代码（I循环通过ac＃datatable获取记录）

Here is my existing code (I loop through a c# datatable to get the records)

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

如何在其他行中添加背景阴影？

how could I add a background shading to every other row?

谢谢
Philip

thanks Philip

推荐答案

跨浏览器解决方案

Cross Browser solutions

如果您不打算支持IE8或更低版本，那么第n个孩子选择器将不适合您。但是，使用jQuery可以简单地添加以下内容，因为jQuery支持 nth-child 。或者，在jQuery中，您可以使用：even 和：odd 。你需要弄清楚什么时候可以打电话给他。

If you're not intending to support IE8 or less then the nth-child selector will not work for you. However, using jQuery you can simply add the following as jQuery does support nth-child. Or alternatively, in jQuery you can use :even and :odd. You'd need to figure out when to call this though.

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

选项2 ：没有jQuery

或者你的代码有：

Option 2: no jQuery

Or from your code have:

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中，性能会更好。

I'd recommend the second option since you wouldn't have to touch jQuery which applies the styles inline. Performance is better if the styles are in the CSS vs inline.

这篇关于为HTML表的奇数行添加备用背景样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！