C＃中動態表格的備用行顏色

Question

我想給將動態創建的行賦予其他顏色。 以下是aspx.cs頁面中的表結構，我正在使用

         StringBuilder html = new StringBuilder();

         foreach (DataRow row in dsDashboardDetails.Tables[0].Rows)
            {

                html.Append("<tr style='color: Black'>");

                foreach (DataColumn column in dsDashboardDetails.Tables[0].Columns)
                {
                    html.Append("<td>");
                    html.Append(row[column.ColumnName]);
                    html.Append("</td>");
                }
                html.Append("</tr>");

            }
            //Table end.
            html.Append("</table>");

Answer 1

為什么不使用CSS：

<style type="text/css">
    tr:nth-child(odd) { background-color:#eee; }
</style>

Answer 2

您是否嘗試過設置計數器並在循環時將該計數器遞增？

然后，每次輸出一行並且計數器為奇數時，例如，您可以有條件地為該行輸出另一種樣式。

最好在輸出時將樣式分隔為CSS和備用類名，這樣，當/如果您要更改網站的樣式，則不必修改代碼。

Answer 3

這是適用於舊瀏覽器的安全方法。

StringBuilder html = new StringBuilder();
var rowCount = 0;
foreach (DataRow row in dsDashboardDetails.Tables[0].Rows)
{
    var className = rowCount++ % 2 == 0 ? "even" : "odd"; //check if it is an odd or even rowCount
    html.Append("<tr style='color: Black' class='"+className+"'>");

    foreach (DataColumn column in dsDashboardDetails.Tables[0].Columns)
    {
        html.Append("<td>");
        html.Append(row[column.ColumnName]);
        html.Append("</td>");
    }
    html.Append("</tr>");
}

//Table end.
html.Append("</table>");

為行添加此CSS

tr.odd{
    background-color: #999;
}
tr.even{
    background-color: #ccc;
}

Answer 4

將布局（html）與后端代碼混合在一起確實是一個壞習慣。 我建議您結合使用DataRepeater（或Razor，具體取決於您的項目）來解決您的問題； -首先在StringBuilder btw中添加<table> ；

CSS：

table tbody tr:nth-child(odd) {
    background-color: #eee;
}

但是如果您要堅持這個概念，可以使用“ toggle”布爾值，如下所示：

bool background=false;
foreach (DataColumn column in dsDashboardDetails.Tables[0].Columns)
                {
                    html.Append("<td>");
if (background) { // add color }
background = !background;
                    html.Append(row[column.ColumnName]);
                    html.Append("</td>");
                }

Answer 5

您可以使用css ，但是如果您正在尋找純C# ，請使用一個計數器：

StringBuilder html = new StringBuilder();
var rowIndex = 0;
foreach (DataRow row in dsDashboardDetails.Tables[0].Rows) {
    html.AppendFormat("<tr style='color: {0}'>", 
        rowIndex % 2 == 0 ? "Black" : "Red"); // Red or anything you want
    foreach (DataColumn column in dsDashboardDetails.Tables[0].Columns) {
        html.Append("<td>");
        html.Append(row[column.ColumnName]);
        html.Append("</td>");
    }
    html.Append("</tr>");
}
//Table end.
html.Append("</table>");