0

アプリケーションのアクティビティを報告するために電子メール ログを作成しています。

テーブルは正常に機能していますが、数百のレコードが出力されると、読み取りが困難になります。

これが私の既存のコードです（レコードを取得するために ac# 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>");

1 行おきに背景の陰影を追加するにはどうすればよいですか?

ありがとうフィリップ

4

4 に答える 4

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

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

コードペンデモ

于 2013-10-17T14:50:51.160 に答える
3

クロスブラウザ ソリューション


オプション 1: jQuery

IE8 以下をサポートするつもりがない場合、nth-childセレクターは機能しません。ただし、jQuery を使用すると、jQuery がサポートしているため、以下を追加するだけで済みますnth-child。:evenまたは、jQueryで andを使用することもできます: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 に触れる必要がないため、2 番目のオプションをお勧めします。スタイルが CSS にある場合とインラインにある場合のパフォーマンスは向上します。

于 2013-10-17T15:02:18.940 に答える
3 
tr:nth-child(odd) {background: #FFF}

or

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

偶数行または偶数行に応じて、それらのいずれかを CSS に追加します。

于 2013-10-17T14:50:32.793 に答える
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 に答える