Есть таблица в xhtml файле на JFS. Требуется, при помощи JQuery проверить значения в ячейках конкретного столбца и при совпадении с образцом изменить цвет фона. В js и в JQuery - полный ноль. Никогда фронтэндом не занимался. Знаю только как подключить библиотеку. Как это можно сделать? Важно, событие должно происходить при загрузке страницы.
-
1У JSF в целом и в PrimeFaces в частности есть свой собственный весьма развитый фронтенд-код. Если вам понадобилось использовать jQuery вместе с JSF, значит вы плохо знаете JSF.– Sergey Gornostaev26 авг 2017 в 12:20
-
1Наверное, если я упомянул обязательное использование JQuery, то это не просто так. А высказывать свое мнение об уровне знаний, даже не пытаясь вникнуть в текст вопроса...– Tariel26 авг 2017 в 12:31
Добавить комментарий
|
1 ответ
Попробуйте такой пример, таблица с одним столбцом, при загрузке страницы отработает 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>
-
К сожалению, не получается. Просто выражение, которое меняет фон у ячеек с кпассом .rr типа $(".rr").css("background-color", "blue"); срабатывает, но метод .each никак не могу заставить заработать. Мне надо перебрать ячейки с классом "rr" (текстовае значение) сравнить с эталоном строки, и если совпадают, изменить фон. Пишу так $(".rr").each(function() { }– Tariel26 авг 2017 в 16:21
-
Добавил новый рабочий пример. Вот так получим содержимое ячейки $(this).text() , а вот так получим родителя т.е. тег <td> ---> $(this).parent(), дальше меняем фон $(this).parent().css({'background-color': 'red'}); 26 авг 2017 в 16:53
-
Спасибо. Перебор заработал, но не срабатывает сравнение. Пишу if (this.text().trim() == "red") { $(this).css("color", "blue"); } Без if все отрабатывает. И еще непонятно, зачем передавать аргумент index в функцию?– Tariel26 авг 2017 в 17:04
-
-
Надо не this.text(), а $(this).text(), т.о. $(this) вернет ссылку на объект перечисления. Аргумент index это порядковый номер для перечисляемых элементов, можно и не передавать, оставить скобки пустыми. 26 авг 2017 в 17:37