0

Есть таблица в xhtml файле на JFS. Требуется, при помощи JQuery проверить значения в ячейках конкретного столбца и при совпадении с образцом изменить цвет фона. В js и в JQuery - полный ноль. Никогда фронтэндом не занимался. Знаю только как подключить библиотеку. Как это можно сделать? Важно, событие должно происходить при загрузке страницы.

2
  • 1
    У JSF в целом и в PrimeFaces в частности есть свой собственный весьма развитый фронтенд-код. Если вам понадобилось использовать jQuery вместе с JSF, значит вы плохо знаете JSF. 26 авг 2017 в 12:20
  • 1
    Наверное, если я упомянул обязательное использование JQuery, то это не просто так. А высказывать свое мнение об уровне знаний, даже не пытаясь вникнуть в текст вопроса...
    – Tariel
    26 авг 2017 в 12:31

1 ответ 1

3

Попробуйте такой пример, таблица с одним столбцом, при загрузке страницы отработает JQuery и изменит фон ячейки.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>Facelet Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</h:head>
<h:body>
    <h:dataTable value="#{order.orderList}" var="o">
        <h:column>
            <f:facet name="header">Order No</f:facet>
            <h:outputText styleClass="order" value="#{o}" />
        </h:column>
    </h:dataTable>

    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
            $('.order').each(function (index) {
                // какое-то условие
                if ($(this).text().trim() > 5) {
                    $(this).parent().css({'background-color': 'red'});
                }
            });
        });
    //]]>
    </script>
</h:body>

5
  • К сожалению, не получается. Просто выражение, которое меняет фон у ячеек с кпассом .rr типа $(".rr").css("background-color", "blue"); срабатывает, но метод .each никак не могу заставить заработать. Мне надо перебрать ячейки с классом "rr" (текстовае значение) сравнить с эталоном строки, и если совпадают, изменить фон. Пишу так $(".rr").each(function() { }
    – Tariel
    26 авг 2017 в 16:21
  • Добавил новый рабочий пример. Вот так получим содержимое ячейки $(this).text() , а вот так получим родителя т.е. тег <td> ---> $(this).parent(), дальше меняем фон $(this).parent().css({'background-color': 'red'});
    – zuvladimir
    26 авг 2017 в 16:53
  • Спасибо. Перебор заработал, но не срабатывает сравнение. Пишу if (this.text().trim() == "red") { $(this).css("color", "blue"); } Без if все отрабатывает. И еще непонятно, зачем передавать аргумент index в функцию?
    – Tariel
    26 авг 2017 в 17:04
  • Все, разобрался. Пропустил $ в операторе сравнения. Вопрос закрыт.
    – Tariel
    26 авг 2017 в 17:29
  • Надо не this.text(), а $(this).text(), т.о. $(this) вернет ссылку на объект перечисления. Аргумент index это порядковый номер для перечисляемых элементов, можно и не передавать, оставить скобки пустыми.
    – zuvladimir
    26 авг 2017 в 17:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.