Блог

Я использую jQuery для изменения background-color четных строк таблицы:

 $("table tbody tr:nth-child(even)").css("background-color", "#F1F1F1");
  

Теперь я хочу установить другой цвет для одного из моих tr s в соответствии с результатом некоторых задач PHP.

 <tr
    <?php
        // Some tasks to see whether background-color should change or not
        if (yes) echo "style='background-color:#A60000;'"
    ?>
>
  

Но это не работает, поскольку jQuery переопределяет цвет и устанавливает его обратно #F1F1F1 . Есть ли какой-либо способ запретить jQuery делать это? Или я тоже должен использовать jQuery?

Не используйте $.css для добавления цвета, а используйте addClass вместо этого для добавления класса в строку. В PHP также добавьте класс вместо встроенного стиля.

Затем в вашей таблице стилей вы можете соответствующим образом оформить строки:

 /* The class that is added by JQuery */
.jqueryclass {
  background-color: #F1F1F1;
}

/* The class that is added by PHP, even if jquery added a class too. */
.phpclass, .phpclass.jqueryclass {
  background-color: #A60000;
}
  

Он намного чище и более удобен в обслуживании. Вы можете позволить CSS решать, как стилизованы конкретные комбинации классов, без необходимости выполнять сложные и запутанные проверки в javascript или PHP.

И если на данный момент у вас есть файл CSS, вы можете добавить классы CSS для оформления альтернативных строк. Таким образом, он работает в браузерах, в которых отключен javascript. Со временем вы сможете полностью избавиться от кода jQuery, когда браузеры, которые не поддерживают этот стиль, исчезнут.

Просто добавьте что-то вроде

 data-nooverride
  

только после / перед атрибутом стиля.

(Вам нужно будет отредактировать следующий код, чтобы использовать каждый из них):

 var tr = $("table tbody tr:nth-child(even)");
if (tr.data('nooverride')){
    $("table tbody tr:nth-child(even)").css("background-color", "#F1F1F1");
}
  

и проверьте это с помощью вашего скрипта

Да, это возможно. Вам нужно как-то идентифицировать строку (возможно, путем добавления класса),

 <tr
    <?php
        if (yes) echo "class='myclass' style='background-color:#A60000;'"
    ?>
>
  

А затем измените селектор jQuery, чтобы игнорировать эту строку

 $(selector).not('.myclass').css({...});
  

Поскольку вы добавляете класс, вам, вероятно, следует добавить цвет фона как часть класса.

Вместо того, чтобы добавлять style атрибут к tr тегу, добавьте a class из вашего PHP-кода.

Затем просто измените свой селектор jQuery, чтобы не изменять tr теги, имеющие данный класс, как показано ниже (см. Документацию jQuery на :not). В этом случае вызывается класс special :

 $("table tbody tr:nth-child(even):not(.special)").css("background-color", "#F1F1F1");
  

Смотрите этот рабочий пример.

В css, если вы добавляете «!important» после некоторого стилизации, браузер сообщает, что этот стиль имеет наивысший приоритет.

Таким образом, вы можете создать класс для него и в вашем файле css:

 .myclass{
  background-color:#A60000 !important;
}
  

Вы можете попробовать добавить его в атрибут style, но я не уверен, будет ли это работать таким образом