使用列分组颜色添加交替行颜色 - 是否有可能？

Question

是否可以将GridView（与jQuery的tablesorter一起）设置为交替行颜色，但更改每个列分组的颜色集合？参见下图：

我目前硬编码我已经创建基于阵列的单元的背景颜色，例如greenArray是一个整数数组，设置为（0,1,2,3），purpleArray是（4,5,6,7）等。但是，当我使用tablesorter插件时，显然单元格保持其颜色，这会弄乱交替的颜色方案：

编辑：我目前正在增加背景颜色VB.NET。下面的函数定义了阵列，然后调用实际上施加造型一个ColorizeMe（）函数：

Private Sub StyleTable(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles gvReport.RowDataBound 

      'Define arrays to color the gridview, if cell index is in array, it will be colored 
      Dim blueArray() As Integer = {0, 17, 18, 19, 20} 
      Dim greenArray() As Integer = {1, 2, 3, 4} 
      Dim purpleArray() As Integer = {5, 6, 7, 8} 
      Dim pinkArray() As Integer = {9, 10, 11, 12} 
      Dim yellowArray() As Integer = {13, 14, 15, 16} 

      _packworks.ColorizeMe(blueArray, greenArray, purpleArray, pinkArray, yellowArray, e.Row) 

End Sub 

而ColorizeMe（）函数：

Public Sub ColorizeMe(ByVal blueArray() As Integer, ByVal greenArray() As Integer, _ 
           ByVal purpleArray() As Integer, ByVal pinkArray() As Integer, _ 
           ByVal yellowArray() As Integer, ByVal row As GridViewRow) 
      Dim i As Integer = 0 

      For Each cell As TableCell In row.Cells 
       If Array.IndexOf(blueArray, i) <> -1 Then 
        If _isDark Then 'Color account column 
         cell.BackColor = ColorTranslator.FromHtml("#B0C4DE") 
        Else 
         cell.BackColor = ColorTranslator.FromHtml("#E6E6FA") 
        End If 
       ElseIf Array.IndexOf(greenArray, i) <> -1 Then 
        If _isDark Then 
         cell.BackColor = ColorTranslator.FromHtml("#a4d5a8") 
        Else 
         cell.BackColor = ColorTranslator.FromHtml("#ddf5de") 
        End If 
       ElseIf Array.IndexOf(purpleArray, i) <> -1 Then 
        If _isDark Then 
         cell.BackColor = ColorTranslator.FromHtml("#ada4d4") 
        Else 
         cell.BackColor = ColorTranslator.FromHtml("#c7c6f4") 
        End If 
       ElseIf Array.IndexOf(pinkArray, i) <> -1 Then 
        If _isDark Then 
         cell.BackColor = ColorTranslator.FromHtml("#e3b3e0") 
        Else 
         cell.BackColor = ColorTranslator.FromHtml("#fae1fa") 
        End If 
       ElseIf Array.IndexOf(yellowArray, i) <> -1 Then 
        If _isDark Then 
         cell.BackColor = ColorTranslator.FromHtml("#e0e3ab") 
        Else 
         cell.BackColor = ColorTranslator.FromHtml("#f5f8dd") 
        End If 
       End If 

       i += 1 
      Next 

      _isDark = Not _isDark 
     End Sub 

Answer 1

由于您的行是交替的亮/暗，你可以采取一个alpha透明背景色的优势：

http://cssdeck.com/labs/6rgab657

<table> 
    <colgroup class="a" span="4" /> 
    <colgroup class="b" span="4" /> 
    <colgroup class="c" span="4" /> 
    <colgroup class="d" span="4" /> 

    <tr> 
    <td>A</td> 
    <td>A</td> 
    <td>A</td> 
    <td>A</td> 
    <td>B</td> 
    <td>B</td> 
    <td>B</td> 
    <td>B</td> 
    <td>C</td> 
    <td>C</td> 
    <td>C</td> 
    <td>C</td> 
    <td>D</td> 
    <td>D</td> 
    <td>D</td> 
    <td>D</td> 
    </tr> 

    <tr> 
    <td>A</td> 
    <td>A</td> 
    <td>A</td> 
    <td>A</td> 
    <td>B</td> 
    <td>B</td> 
    <td>B</td> 
    <td>B</td> 
    <td>C</td> 
    <td>C</td> 
    <td>C</td> 
    <td>C</td> 
    <td>D</td> 
    <td>D</td> 
    <td>D</td> 
    <td>D</td> 
    </tr> 
</table> 

CSS：

.a { 
    background: blue; 
} 

.b { 
    background: green; 
} 

.c { 
    background: purple; 
} 

.d { 
    background: red; 
} 

tr:nth-child(odd) { 
    background: rgba(255, 255, 255, .70); 
}