Question

如果表行的类名为RGB代码，是否可以更改表行的颜色？

例如：

<tr class="#0DFF39">....

我无法直接设置background-color，这是我能得到的最接近的值。我不确定这是否可能。

Answer 1

您应该创建以颜色命名的预定义类，例如：

.red{
  background-color: #9E1200;
}

.blue{
  background-color: #3FB8B4;
}

<table>
  <tr class="red">
    <th>Title 1</th>
    <th>Title 2</th>
    <th>Title 3</th>
  </tr>
  <tr class="blue">
    <td>Exemple 1</td>
    <td>Exemple 2</td>
    <td>Exemple 3</td>
  </tr>


</table>

Answer 2

这不是确切的解决方案，但可以为您提供一些有关如何实现的见解。您提到您正在使用Vuetify数据表，因此，如果该表为呈现的每一行提供了任何回调，则只需将该代码onclick替换为该回调函数就可以了，否则，我相信这是不可能的。

<table>
  <tr class="#9E1200" onclick="changeBgColor(this)">
    <th>Title 1</th>
    <th>Title 2</th>
    <th>Title 3</th>
  </tr>
  <tr class="#3FB8B4" onclick="changeBgColor(this)">
    <td>Example 1</td>
    <td>Example 2</td>
    <td>Example 3</td>
  </tr>
</table>

setattr(ListNode, "__lt__", lambda self, other: self.val <= other.val)

Answer 3

在这种情况下，您可以使用CSS变量，如以下示例所示。但是请记住where you can use CSS variables。

var $colorPicker = $('#color-picker').on('change', changeTableRowColor);

function changeTableRowColor() {
  var selectedColor = $colorPicker.val(),
    $targetRows = $('table tr.bg-custom'),
    numberRows = $targetRows.length;

  for (var i = 0; i < numberRows; i++) {
    $targetRows[i].style.setProperty('--bg-color', selectedColor);
  }

}

table {
  border-spacing: 0;
}

.bg-custom td {
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="color-picker">
  Select a color
  <input type="color" name="color-picker" id="color-picker" value="#0DFF39" />
</label>

<table>
  <tr>
    <td>01</td>
    <td>02</td>
    <td>03</td>
  </tr>
  <tr class="bg-custom" style="--bg-color: #0dff39;">
    <td>04</td>
    <td>05</td>
    <td>06</td>
  </tr>
  <tr>
    <td>07</td>
    <td>08</td>
    <td>09</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr class="bg-custom" style="--bg-color: #0dff39;">
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
</table>

如何根据类别名称设置行的颜色？

3 个答案: