5

テーブルの行を交互に色付けする方法について、オンラインで多くの記事を見つけました。個々の行に異なる色を使用したい場合はどうすればよいですか?

ここに画像の説明を入力

<table class="table1">          
<tr>
   <th>Name</th>
   <th>Surname</th>
   <th>Email</th>
</tr>                
 @{ foreach (var p in Model.People)
     {   <tr>
             <td>@p.Name</td>
             <td>@p.Surname</td>
             <td>@p.Number</d>
         </tr>
     } 
  }
</table>
4

6 に答える 6

3

例えばこんな感じ。列挙型を定義するか、後でランダムに色を生成できます。

public enum Colors
{
    Blue = 1,
    Red = 2,
    Yellow = 3,
    Pink = 4,
    Green = 5,
}

次に、マークアップファイルで、列挙型からランダムな色を取得します

@{ foreach (var p in Model.People)
     {   <tr style="background-color:@(Colors[new Random().Next(0,Colors.Length)])">
             <td>@p.Name</td>
             <td>@p.Surname</td>
             <td>@p.Number</d>
         </tr>
     } 
}

更新: または、ユーザーにとって読みやすくしたい場合は、奇数および偶数のcss スタイルを使用します。

于 2012-05-30T07:27:13.583 に答える
1

このフィドルをチェックしてください - http://jsfiddle.net/r74j6/6/

またはこの投稿 - jquery を使用して別の背景色を適用する

于 2012-05-30T07:33:48.243 に答える
0

td の背景色を塗りつぶしたい:

.table1 tr:nth-child(1) td { background-color: red }
.table1 tr:nth-child(2) td { background-color: green }
.table1 tr:nth-child(3) td { background-color: blue }
于 2012-05-30T07:35:04.027 に答える
0

css セレクターを使用できますが、互換性:nth-childを確認してください。

tbody tr:nth-child(1) { background-color: #ffc000; }

例: http://jsfiddle.net/SK4dV/

IE8以下では、スタイル属性またはクラスをJavaScriptで追加するか、テーブルを生成するときにすべての行にクラスを追加し、それにいくつかのcssルールを追加できます。

于 2012-05-30T07:28:13.673 に答える
0

基本的に、2 つのオプションがあります。

1)モデル プロパティ- クラスを各人のモデル プロパティとして配置します。これにより、異なるものを異なる人に割り当てることができます。

2)純粋な CSS - CSS ルートが必要な場合は、異なるセレクターに異なる色を指定するだけです。

個人的には、2 番がいいと思います。以下に例を示します。


異なる行の色 -デモ

各アイテムの行の色を変えるには、次のようにする必要があります。

tr:nth-child(2)
{
    background-color: red;
}
tr:nth-child(3)
{
    background-color: blue;
}
tr:nth-child(4)
{
    background-color: green;
}
tr:nth-child(5)
{
    background-color: yellow;
}
tr:nth-child(6)
{
    background-color: orange;
}
tr:nth-child(7)
{
    background-color: purple;
}

交互の行 -デモ

交互の行の場合は、次のようにします。

tr:not(:nth-child(1)):nth-child(odd) /* excluding first row (header) */
{
    background-color: blue;
}
tr:nth-child(even)
{
    background-color: red;
}
于 2012-05-30T07:28:30.177 に答える