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

Your fiddle appears to work fine. Can you describe the problem other than "doesn't work"? — fdomn-m
– fdomn-m, Commented May 23, 2022 at 16:01
like i said in the post yeah fidlle works fine until you type inside the css part background-color: #1F272B; or any other color of course than it stops working — smoken122
– smoken122, Commented May 23, 2022 at 16:14
You mean if you add some css to the css panel in the fiddle? Please add that so it demonstrates the issue. Otherwise it's just a guess as to what you're doing extra (to what's in the question) as that's where the issue is. — fdomn-m
– fdomn-m, Commented May 23, 2022 at 16:17
Works fine when I do it, guessing how you've added your css. jsfiddle.net/xas6Lpyt Your jquery adds css to the tr - so if you add .css to the td it will, of course, override the tr as the td is "on top of" the tr. Alternatively your jquery could add to the td: $('.nieparzyste td').css jsfiddle.net/xas6Lpyt/1 — fdomn-m
– fdomn-m, Commented May 23, 2022 at 16:19
yeah that was the problem when adding to td it stopped working thanks a lot now it works :D — smoken122
– smoken122, Commented May 23, 2022 at 16:22

fdomn-m · Accepted Answer · 2022-05-23 16:30:22Z

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 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>

Dumitru Birsan · Accepted Answer · 2022-05-23 15:48:00Z

0

you are looking for background-color instead of backgroundColor

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

answered May 23, 2022 at 15:48

Dumitru Birsan

8568 silver badges15 bronze badges

1 Comment

fdomn-m Over a year ago

You're thinking of css, names in camel case work fine in jquery, eg: jsfiddle.net/jo0skau4

Collectives™ on Stack Overflow

Setting bg color with jQuery doesn't override existing one

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related