2014-01-09 1 views
2

Я прочитал почти каждую статью об этом ... Просто не могу найти причину, по которой это не работает. Я хочу изменить свой фоновый цвет с помощью jQuery. Там нет ошибок в веб-инспектора или, что так всегда, просто ничего не происходит ...не может изменить фоновый цвет с помощью jQuery

Мой HTML код:

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

И мой код JQuery: (Обратите внимание, что мой код для этого начинается почти в конце)

$(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"); 
    }); 
}); 
+0

Вы пытались помещать 'alert()' в обработчик, чтобы убедиться, что он даже работает, прежде чем предполагать, что проблема связана с настройкой CSS? – Barmar

+0

@Barmar - Если бы он это сделал, он понял бы, что при динамическом вводе элементов обработчик событий не работает. – adeneo

+0

Я знаю. Я был пассивно-агрессивно указывал на это. – Barmar

ответ

1

Вам нужно сделать, как этот

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

YESS THANK YOU ЭТО РАБОТАЕТ: D Почему был .css («background-color», «red») не работает? – spafrou

+0

Это не CSS, это обработчик событий, вы должны делегировать. – adeneo

+0

@spafrou - и я ответил десять минут назад, вы должны прочитать ответы и попробовать код. – adeneo

0

Вам нужно сделать, как этот

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

вам нужно использовать on потому что три элемента динамически создаются. В противном случае событие click не будет связываться с вновь созданными элементами tr.

+1

Не имеет значения, camelcase отлично работает – adeneo

+0

Я пробовал. Он не работает ... Я попробовал даже с addClass, чтобы добавить класс CSS и т. Д. Но код для вставки tr в таблицу работает просто отлично – spafrou

+2

Я даже докажу это -> http://jsfiddle.net/ZaS6V/1/ – adeneo

0

Попробуйте это,

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

jQuery понимает оба стиля имен CSS. – Barmar

0

Прежде всего вы не можете установить фон на т.р. тег, только тд

Другое дело установить цвет следующим образом

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

ОК извините за мою ошибку.

Действительно фон свойство хорошо работает для тра

Здесь я готовлю свой пример с правильным выбором JQuery

http://jsfiddle.net/XJb98/

Просто нажмите на заголовок таблицы (потому что в примере я не можешь изменить TBODY это THEAD)

+3

Почему вы не можете установить цвет фона строки? – adeneo

0

Пожалуйста, попробуйте это ..

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

Если вы хотите изменить TR фона в красный цвет на TR щелчком мыши, используйте следующий код

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

Если вы хотите изменить TR фона в красный цвет на документ, готовый затем использовать следующий код

// в готовом состоянии

$(function(){ 
    //Change all TR background color to red 
    $("#tabela").find("tr").css({"background":"red"}); 
}); 
Смежные вопросы