使用 jQuery 设置背景颜色不会覆盖现有颜色

Question

我有一个 table，我使用 jQuery 为偶数行和奇数行着色，主要是因为我希望用户从表格中的几个选项中选择他想要的颜色

但是当我在 css 中设置 table 的 bgcolor 时，jQuery 脚本将无法运行。

下面是改变颜色的代码(jsfiddle https://jsfiddle.net/sh7cgaz4/)

添加到css时停止工作，例如：

table,th,td {
    background-color: red; 
}

这是停止工作时的 fiddle：https://jsfiddle.net/8g7wn0ov/

$(function() {
    var colors = [{
    display: "jasny żółty",
    value: "ffffcc"        
}, {
    display: "jasny niebieski",
    value: "ccffff"
}, {
    display: "jasny zielony",
    value: "ccffcc"
}, {
    display: "szary",
    value: "cccccc"
}, {
    display: "biały",
    value: "ffffff"
}];
    
var options = ['<option value="">wybierz kolor</option>'];
    
for (var i = 0; i < colors.length; i++) {
    options.push('<option value="');
    options.push(colors[i].value);
    options.push('">');
    options.push(colors[i].display);
    options.push('</option>');       
}
    
$('#koloryparzyste').html(options.join('')).change(function() {
        var val = $(this).val();
        if(val){
            $('.parzyste').css('backgroundColor', '#' + val);
        }
    });
var options = ['<option value="">wybierz kolor</option>'];
    
for (var i = 0; i < colors.length; i++) {
    options.push('<option value="');
    options.push(colors[i].value);
    options.push('">');
    options.push(colors[i].display);
    options.push('</option>');       
}
    
$('#kolorynieparzyste').html(options.join('')).change(function() {
    var val = $(this).val();

    if (val) {
       $('.nieparzyste').css('backgroundColor', '#' + val);
    }
});

Answer 1

您正在寻找 background-color 而不是 backgroundColor

$('.nieparzyste').css('background-color', '#' + val);

Answer 2

您的问题是您在 table,th,td 上设置了 css 背景颜色，但在您的 javascript 中，您只更新了 tr（.nieparzyste / .parzyste 这是 tr 上的 class).

当 td 位于 tr 的内部或“顶部”时，td 颜色会覆盖 tr 颜色。

您可以通过仅在 tr 上设置“默认”（在 css 中）颜色或通过更改 jquery 来同时更新 [=18] 来解决此问题=].

代码段使用 tr 颜色：

$(function() {
  var colors = [{
    display: "jasny żółty",
    value: "ffffcc"
  }, {
    display: "jasny niebieski",
    value: "ccffff"
  }, {
    display: "jasny zielony",
    value: "ccffcc"
  }, {
    display: "szary",
    value: "cccccc"
  }, {
    display: "biały",
    value: "ffffff"
  }];

  var options = ['<option value="">wybierz kolor</option>'];

  for (var i = 0; i < colors.length; i++) {
    options.push('<option value="');
    options.push(colors[i].value);
    options.push('">');
    options.push(colors[i].display);
    options.push('</option>');
  }

  $('#koloryparzyste').html(options.join('')).change(function() {
    var val = $(this).val();
    if (val) {
      $('.parzyste').css('backgroundColor', '#' + val);
    }

  });
  var options = ['<option value="">wybierz kolor</option>'];

  for (var i = 0; i < colors.length; i++) {
    options.push('<option value="');
    options.push(colors[i].value);
    options.push('">');
    options.push(colors[i].display);
    options.push('</option>');
  }

  $('#kolorynieparzyste').html(options.join('')).change(function() {
    var val = $(this).val();
    if (val) {
      $('.nieparzyste').css('backgroundColor', '#' + val);
    }

  });


});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

table tr {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="prawy">
  <table id="kolorwa">
    <tr class="parzyste">
      <th>Lp.</th>
      <th>Imię</th>
      <th>Nazwisko</th>
      <th>Stanowisko</th>
      <th>Data zatrudnienia</th>
      <th>Ilość dni urlopowych</th>
    </tr>
    <tr class="nieparzyste">
      <td>1</td>
      <td>Barbar</td>
      <td>Sznuk</td>
      <td>Dział Hr</td>
      <td>11.06.2002</td>
      <td>1</td>
    </tr>
    <tr class="parzyste">
      <td>2</td>
      <td>Tomasz</td>
      <td>Kopyra</td>
      <td>Pracwnik Produkcji</td>
      <td>11.06.2005</td>
      <td>11</td>
    </tr>
    <tr class="nieparzyste">
      <td>3</td>
      <td>Tomasz</td>
      <td>Bukowski</td>
      <td>Pracwnik Produkcji</td>
      <td>02.01.2007</td>
      <td>10</td>
    </tr>
    <tr class="parzyste">
      <td>4 </td>
      <td>Janusz</td>
      <td>Tracz</td>
      <td>Kierownik</td>
      <td>21.06.2007</td>
      <td>3</td>
    </tr>
    <tr class="nieparzyste">
      <td>5</td>
      <td>Grzegorz</td>
      <td>Kowalski</td>
      <td>Dyrektor</td>
      <td>29.09.1999</td>
      <td>15</td>
    </tr>
  </table>

  <form name="koloryparzyste">Tu zmienisz kolory parzyste<br>
    <select id="koloryparzyste"></select>
  </form>
  <form name="kolorynieparzyste">Tu zmienisz kolory nieparzyste<br>
    <select id="kolorynieparzyste"></select>
  </form>

</div>

使用 jQuery 设置背景颜色不会覆盖现有颜色

Setting bg color with jQuery doesn't override existing one

html

javascript

jquery