Question

我有一个tr：table，我需要使用CSS设置样式。表的所有常规样式函数都在工作，但行绑定和行选择不会出现。当我查看渲染的源代码时，我没有看到要抓取的id或类的行的差异，并且官方文档没有任何属性来声明样式类。这是可能的，如果是这样的话，我需要做些什么来让我的CSS抓住它？

<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
</tr:table>

修改的

让我试着克服正在发生的事情。

首先，使用上面的声明告诉jsf生成一个表，并且属性rowBandingInterval告诉它给每一行交替颜色（如果它设置为2，那么它会做2行一种颜色，2行另一种颜色，2行原件等。）

一旦页面呈现为标准html，trinidad（和jsf）将自己的类和ID应用于html。我的正常程序是查看渲染的html，找到它正在应用的类并为其添加CSS规则。但是在这种情况下，不会添加任何其他样式（渲染的html中没有任何内容表示一行与另一行不同）。

所以问题是，如何让trinidad给出交替的行和用户选择的行不同的类/ ID让我可以使用CSS？

编辑2

为了让任何人都注意发布，实际的td元素没有变化

编辑3

在切换了所有属性然后将所有代码剥离到它的裸骨之后，我找到了行条带属性。特立尼达课程相当混乱，除非你重新格式化代码并消除所有噪音，否则你将看不到它。 Trinidad将类.af_column_cell-text-band添加到带状行，而正常行只有.af_column_cell-text。所以问题的一半已经解决了。我仍然需要知道用户选择行的选择器，我很乐意将所有弹珠给予任何可以给我答案的人。

Answer 1

有一个漂亮而简单的jquery代码来执行位于here的行突出显示。

jQuery如下

<script type="text/javascript">
  $(document).ready(function(){
    $(".stripeMe tr")
      .mouseover(function() { $(this).addClass("over");})
      .mouseout(function() { $(this).removeClass("over");
      });
    $(".stripeMe tr:even").addClass("alt");
  });
</script>

然后有点css

tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }

btw我从以下网站获取了所有代码，您也可以view the demo。

Answer 2

这不是直接回答你的问题，但为什么不使用CSS3伪类nth-child来实现这个效果呢？例如：

tr:nth-child(2n)
{
background-color:red;
}

Answer 3

我在注册过程中犯了一些错误，所以这是一个新答案，而不是评论。

要处理特立尼达剥皮主题，您需要执行以下操作：

在你的web.xml中，你需要在开发时将此参数设置为true：

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>

为你的firefox获取firebug。使用该附加组件，您可以确定在组件上使用了哪个trinidad-selector。

用户选择的行没有选择器。我是这样做的：为您的对象提供类似“突出显示属性”的对象，如果它是选定的属性，则更改该对象。

<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>

为表格的所有列执行此操作，您就完成了。

Answer 4

我将向您推荐特立尼达文档。 http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html 在他们的例子中，他们将条带声明为行banding="row"我会假设你没有得到任何东西的原因是你没有声明是否是行或列条带。

Answer 5

将这些选择器放在trinidadskin.css文件中（在我的情况下为smSkin.css）： .AFTableCellDataBackgroundColor：别名 { background-color：＃F5F5DC; }

.AFTableCellDataBandedBackgroundColor：别名 { background-color：#FFFFFF; }

配置trinidad-skins.xml

<skin>
    <id>
        sm.desktop
    </id>
    <family>
        sm
    </family>
    <render-kit-id>
        org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
        skins/sm/smSkin.css
    </style-sheet-name>
</skin>

使用CSS在tr：table中设置样式行条带和选择

5 个答案: