jquery - 使用列分组颜色添加交替的行颜色 - 可能吗？

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