Setting bg color with jQuery doesn't override existing one-CodePudding

I have a table that I use jQuery to color even and odd rows mainly because I want the user to chose which color he wants from few selections in form

But when I setup bgcolor of a table in css, the jQuery script won't work.

Below is the code to change the colors (jsfiddle https://jsfiddle.net/sh7cgaz4/)

It stops working when adding to the css, eg:

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

here is the fiddle when it stops working: 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);
    }
});

CodePudding user response：

Your issue is that you are setting the css background colour on the table,th,td but in your javascript, you're only updating the tr (.nieparzyste / .parzyste which is a class on the tr).

As a td sits inside or "on top" of a tr the td colour overrides the tr colour.

You can fix this by setting the "default" (in the css) colour only on the tr, or by changing the jquery to also update the td.

Snippet using tr colour:

$(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 >
      <th>Lp.</th>
      <th>Imię</th>
      <th>Nazwisko</th>
      <th>Stanowisko</th>
      <th>Data zatrudnienia</th>
      <th>Ilość dni urlopowych</th>
    </tr>
    <tr >
      <td>1</td>
      <td>Barbar</td>
      <td>Sznuk</td>
      <td>Dział Hr</td>
      <td>11.06.2002</td>
      <td>1</td>
    </tr>
    <tr >
      <td>2</td>
      <td>Tomasz</td>
      <td>Kopyra</td>
      <td>Pracwnik Produkcji</td>
      <td>11.06.2005</td>
      <td>11</td>
    </tr>
    <tr >
      <td>3</td>
      <td>Tomasz</td>
      <td>Bukowski</td>
      <td>Pracwnik Produkcji</td>
      <td>02.01.2007</td>
      <td>10</td>
    </tr>
    <tr >
      <td>4 </td>
      <td>Janusz</td>
      <td>Tracz</td>
      <td>Kierownik</td>
      <td>21.06.2007</td>
      <td>3</td>
    </tr>
    <tr >
      <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>

CodePudding user response：

you are looking for background-color instead of backgroundColor

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