如何通过 CSS 选择 <p:dataTable>？答案

【问题标题】：How to select the <p:dataTable> by CSS?如何通过 CSS 选择 <p:dataTable>？
【发布时间】：2012-08-25 01:26:25
【问题描述】：

首先我使用的是<h:dataTable>，我对此没问题，但之后我需要更多功能，所以我开始使用 Primefaces 并使用它的<p:dataTable>。一切正常，但我在表格上应用的 CSS 停止工作。然后我发现<p:dataTable>是先创建一个<div>，然后在<div>里面，是创建一个<table>。

 <div id="tcform:tclist" .......>
       <table role="grid">....</table>
 </div>

但是<h:dataTable> 只创建 HTML <table>。现在我想知道如何获取表的 ID，或者是否有任何解决方案可以访问该表。我也想知道<h:dataTable>和<p:dataTable>为什么不一样。

【问题讨论】：

如果你在你的表单上做 prependId="false" 你可以像这样访问表格#tclist.ui-datatable table {....} 如果你想访问 tr 例如你可以做#tclist tr{...} 如果你有预先准备好的表格我猜你可以试试#tcform:tclist tr{...} 或#tcform\\:tclist tr{...}

标签： css jsf jsf-2 datatable primefaces

【解决方案1】：

如果您想以通用方式设置表格样式，只需相应地更改 CSS 选择器即可。 <p:dataTable> 的 <table> 可以由 ui-datatable 类选择。

.ui-datatable td {
    background: pink;
}

如果您只想以特定方式设置特定表格的样式，请给它一个类名，以便您可以按类名而不是 ID 进行选择。

例如

<p:dataTable styleClass="foo">

可以被.ui-datatable.foo {} 覆盖。例如

.ui-datatable.foo td {
    background: hotpink;
}

【讨论】：

为此我应该做 prependId="false" 吗？
不，您在这里不是按 ID 选择的。按 ID 选择通常只对整个站点共享的主要布局组件有意义，例如页眉/菜单/内容/页脚。它们通常不在表格或表格中。
我可以通过在我的 javascript 文件中执行此操作来获取 HTML （由 primefaces DataTable 创建）-> ('ui-datatable').dataTable({.....});