Изменение цвета фона поля ввода редактируемого столбца в сетках, которые могут быть изменены при изменении значения

Question

У меня есть редактируемый coloumn в dataTable. Код:

<p:column id="articleDescription" headerText="Article Description" filterBy="#{article.description}" filterMatchMode="startsWith"> 
    <p:inputText id="description" value="#{article.description}"style="border:none; box-shadow:none;" /> 
</p:column> 

1. Я хочу, чтобы изменить цвет фона inputText - описание на событие - valueChange. Как я могу это изменить?
2. Кроме того, цвет фона по умолчанию должен быть таким же, как и в его родительской строке? Является ли это возможным? Как это можно сделать?

Спасибо, Shikha

Answer 1

цвет фона ячейки был установлен в качестве родителей цвет строки как:

.inputTextStyle { 
    background-color: transparent !important; 
} 

<h:inputText id="vendorDiscountPerInputTxt" 
    value="#{articlePromo.descPromoPorcentaje}" 
    styleClass="inputTextStyle"> 
</h:inputText> 

Кроме того, изменили цвет фона ячейки на события изменения значения, как:

$(document.getElementById(str)).css("background-color", "pink !important"); 

Маркировка как важное требуется, потому что primefaces помечать как важное. Итак, чтобы переопределить его.

Answer 2

Я хочу, чтобы изменить цвет фона inputText - описание на событие - valueChange. Как я могу это изменить?

Просто выполнить некоторые JavaScript/JQuery во change случае входного элемента (PrimeFaces поставляется с JQuery в комплекте, вам не нужно устанавливать его самостоятельно).

---

Кроме того, по умолчанию цвет фона из него должно быть таким же, как его родительской строки? Является ли это возможным? Как это можно сделать?

С JQuery легко захватить родительскую строку и получить его свойство CSS background-color.

---

Предполагая, что вы собираетесь направление JQuery, это будет выглядеть примерно так

<p:inputText styleClass="changeable" /> 

с

$(document).delegate("tr :input.changeable", "change", function() { 
    var $this = $(this); 
    $this.css('background-color', $this.closest('tr').css('background-color')); 
});