Setting bg color with jQuery doesn't override existing one

Question

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

Answer 1

you are looking for background-color instead of backgroundColor

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