使用jQuery設定bg顏色不會覆寫現有的顏色

我有一個表，我使用 jQuery 為偶數行和奇數行著色，主要是因為我希望用戶從表單中的少數選擇中選擇他想要的顏色

但是當我bgcolor在 css 中設定表格時，jQuery 腳本將不起作用。

下面是更改顏色的代碼（jsfiddle https://jsfiddle.net/sh7cgaz4/）

添加到 css 時它停止作業，例如：

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

這是停止作業時的小提琴：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);
    }
});

uj5u.com熱心網友回復：

您的問題是您在 javascript 上設定 css 背景顏色，table,th,td但在您的 javascript 中，您只是在更新tr（.nieparzyste/.parzyste這是 上的一個類tr）。

當 atd位于 a 的內部或“頂部”時tr，td顏色會覆寫tr顏色。

您可以通過僅tr在td.

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>

uj5u.com熱心網友回復：

你正在尋找background-color而不是backgroundColor

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

標籤：javascript html jQuery

上一篇：列出用戶的關注者時出錯

下一篇：Javascript-classList.toggle("my-class")不起作用，因為主類正在獲取多個