javascript - 丰富的数据表在单击复选框时突出显示选定的行
问题描述
我有数据表,我想在 jsf 中突出显示选中的行时单击复选框(第 0 列)以使用富面框架
我的 jquery 脚本应该如何?
<rich:dataTable id="modelList" value="#{bean.modelList}" var="model" rows="#{bean.dataTableRowCountEachPage}" rowClasses="odd-row,even-row">
<rich:column width="20px">
<f:facet name="header">
<h:outputText value="Select" />
</f:facet>
<h:selectBooleanCheckbox class="checkboxClass" value="#{model.selected}">
<f:ajax event="click" listener="#{bean.getSelectedItems}" render=":tableForm:res" />
</h:selectBooleanCheckbox>
</rich:column>
<rich:column sortBy="#{model.applicationName}" filterValue="#{model.applicationName}" filterExpression="#{fn:containsIgnoreCase(model.applicationName,bean.applicationNameFilter)}">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Application Name" />
<h:inputText value="#{bean.applicationNameFilter}">
<a4j:ajax event="blur" render="modelList" execute="@this" />
</h:inputText>
</h:panelGroup>
</f:facet>
<h:outputText value="#{model.applicationName}" />
</rich:column>
</h:form>
我正在使用这个 CSS 查询
<script>
$(document).ready(function(){
$("checkboxButton").click(function(){
$("tr").toggleClass("selected");
});
});
</script>
<style>
.selected
{
.rf-dt-c:select-checkbox{
background-color: #f7dbdb;
}
}
</style>
此查询工作错误方式突出显示所有行
解决方案
我现在处理。我用了这个脚本
<script>
$('.checkboxClass').each(function (index, item) {
if ($(item).is(':checked')==true) {
var row = $('.rf-dt-r')[index];
$(row).css('background-color', '#f7dbdb');
}
});
</script>
推荐阅读
- java - 关于在java中打印i++的while循环问题
- angular - 导入 MobxAngularModule 导致 Ionic 应用程序编译失败
- python - Pandas 到 CSV 的写入也不准确
- r - 如何计算和绘制具有不同数据长度的两个密度图之间的差异?
- c - Postgres C - 比较两个基准
- csv - 管道本地 csv 数据摄取 - 错误:没有注册名为“'vn_pricing'”的包
- python - 如果与列表匹配,则删除字符串
- javascript - 为什么我的接收者的类实例方法收不到任何数据?
- r - 在 R 中创建重复向量的替代方法
- chatbot - php json 中 Facebook messanger 聊天机器人响应的新行问题