can not change background-color using jQuery

Question

I have read almost every article about this... Just can't find the reason why this isn't working. I want to change my tr background-color using jQuery. There are no errors in web inspector or what so ever, just nothing happens...

My html code:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <title>Opravila</title>
    <style>
      .slika 
      {
      width:20px;
      height:20px;
      }
      tr
      {
      background-color:white;
      }

      tr.highlight
      {
      background-color:yellow;
      }

    </style>
  </head>
  <body>
    <script src="script.js" type="text/javascript"></script>
    <form>
      Naslov opravila: <input type="text" id="naslov"></input>
      Vrsta opravila: <input type="text" id="vrsta"></input>
      Nujnost opravila: 
      <select id="nujnost">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input type="button" value="Dodaj opravilo" id="dodaj"></input>

    </form>

    <img src="minus.png" class="slika" id="slika"></img>
    <table id="tabela">
      <thead>
        <tr>
          <th>#</th>
          <th>Opravilo</th>
          <th>Vrsta</th>
          <th>Nujnost</th>
          <th>Datum vnosa</th>
        </tr>
      </thead class="vrstica">
      <tbody>
      </tbody>
    </table>

  </body>
</html>

And my jQuery code: (Note that my code for this starts almost at the end)

$(document).ready(function(){
    $("#dodaj").click(function() {
        var naslov=$("#naslov");
        naslov=naslov.val();
        var vrsta=$("#vrsta");
        vrsta=vrsta.val();
        var nujnost=$("#nujnost");
        nujnost=nujnost.val();
        var zaporedna_st=$("#tabela tbody tr").length;

        var datum =new Date();
        datum=datum.getDate()+"."+(datum.getMonth()+1)+"."+datum.getFullYear();

        $("#tabela tbody").append("<tr><td>"+(zaporedna_st+1)+"</td><td>"+naslov+"</td><td>"+vrsta+"</td><td>"+nujnost+"</td><td>"+datum+"</td></tr>");
    });

    $("#tabela tbody tr").click(function() {
        $(this).css("backgroundColor", "red");
    });
});

Did you try putting an `alert()` in the handler to verify that it even runs, before assuming that the problem was with setting CSS? — Barmar, Jan 09 '14 at 17:36
@Barmar - If he did, he would realize that when inserting the elements dynamically the event handler doesn't work. — adeneo, Jan 09 '14 at 17:37
I know. I was passive-aggressively pointing that out to him. — Barmar, Jan 09 '14 at 17:40
Firstly why are you adding class later:``, Also, you were selecting it wrongly, `$("#tabela tbody tr").click(` whereas, you have your header in `thead` — Nagaraj Tantri, Jan 09 '14 at 17:48

score 1 · Accepted Answer · answered Jan 09 '14 at 17:30

1

You need to do like this

$("#tabela tbody").on('click', 'tr', function() {
    $(this).css("backgroundColor", "red");
});

answered Jan 09 '14 at 17:30

adeneo

312,895
29
395
388

YESS THANK YOU THIS IS WORKING :D Why was .css("background-color","red") not working? – spafrou Jan 09 '14 at 17:40
It's not the CSS, it's the event handler, you have to delegate. – adeneo Jan 09 '14 at 17:41
@spafrou - and I did answer this ten minutes ago, you should read the answers and try the code. – adeneo Jan 09 '14 at 17:42
@aldeneo yes sorry I overlooked it. – spafrou Jan 09 '14 at 17:47

Pranav C Balan · Answer 2 · 2014-01-09T17:36:05.977

0

You need to do like this

$("#tabela tbody").on('click', 'tr',function() {
    $(this).css("backgroundColor", "red");
});

you need to use on because the tr elements are dynamically created. Otherwise the click event will not be bind to the newly created tr elements.

edited Jan 09 '14 at 17:36

answered Jan 09 '14 at 17:29

Pranav C Balan

113,687
23
165
188

1

Doesn't matter, camelcase works just fine – adeneo Jan 09 '14 at 17:31
I tried. It's not working... I tried even with addClass to add CSS class and so on.. But code for inserting tr into table is working just fine – spafrou Jan 09 '14 at 17:32
2

I'll even prove it -> http://jsfiddle.net/ZaS6V/1/ – adeneo Jan 09 '14 at 17:32
well then i don't know what is happening. I copied this same code, save it,... no result – spafrou Jan 09 '14 at 17:36

Krish R · Answer 3 · 2014-01-09T17:44:53.633

0

Try this,

$("#tabela tbody").click(function() {
     $(this).find('tr').css('backgroundColor', 'red');
});

edited Jan 09 '14 at 17:44

answered Jan 09 '14 at 17:30

Krish R

22,583
7
50
59

3

jQuery understands both styles of CSS names. – Barmar Jan 09 '14 at 17:32

Bobbe · Answer 4 · 2014-01-09T17:42:05.553

0

First of all you can't set background to tr tag, only for td

Another point is set color like this

$('td').css({'backround-color: 'blue'})

OK sorry for my mistake.

Really background property works well for tr

Here I prepare your example with correct jQuery selector

http://jsfiddle.net/XJb98/

Just click to table header (because in example I don't have tbody I change it to thead)

edited Jan 09 '14 at 17:42

answered Jan 09 '14 at 17:32

Bobbe

53
1
1
6

3

Why can't you set the background color of the row ? – adeneo Jan 09 '14 at 17:34

score 0 · Answer 5 · answered Jan 09 '14 at 17:45

0

Please try this..

$("#tabela :tr").click(function(e) {
    var currentRowId = this.id;
    $("#"+currentRowId ).css("backgroundColor", "red");
});

answered Jan 09 '14 at 17:45

Arpit Jain

455
3
8

score -1 · Answer 6 · answered Jan 09 '14 at 17:48

If you want to change TR background to red color on TR click then use the following code

//on ready state
$(function(){
  //Change TR background color to red on TR click Event
  $("#tabela").find("tr").on('click', function() {
    $(this).css({"background":"red"});
  });
});

If you want to change TR background to red color on document ready then use the following code

//on ready state

$(function(){
  //Change all TR background color to red
  $("#tabela").find("tr").css({"background":"red"});
});

can not change background-color using jQuery

6 Answers6

If you want to change TR background to red color on TR click then use the following code

If you want to change TR background to red color on document ready then use the following code