使用CSS表：样式行条带和选择TR

https://stackoverflow.com/questions/3023236

26-09-2019
|

题

我已经有了一个TR：表，我使用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>

修改的

让我试着clairfy发生了什么。

首先，使用声明之上告诉JSF来生成一个表，所述属性rowBandingInterval告诉它给每一行交替的颜色（如果它被设置为2，那么它会做2排一种颜色，2排另一个，2行原等）

在页面被渲染成标准的HTML，特立尼达（和JSF）应用自己的类和ID的HTML。我的正常程序是看呈现的HTML，发现它底肥类，并添加CSS规则了。然而，在这种情况下，没有额外的样式被添加（没有在呈现的HTML表示一个行是从另一不同）。

所以，问题是，我怎么告诉特立尼达要么给交行和用户选定的行不同的类/ IDS对我抢上与CSS？

编辑2

只是为了让别人关注贴，有实际td要素没有变化或者

编辑3

在具有切换左右，然后所有属性汽提所有代码下降到它的基本框架，我发现了行条带属性。特立尼达类，而convluted，除非你重新格式化代码，并拔出所有的噪音，你不会看到它。特立尼达添加类.af_column_cell-text-band到带状行，其中作为正常行刚刚.af_column_cell-text。这就是一半的问题就迎刃而解了。我还需要知道用户选择列的选择，为此，我会很乐意给所有弹珠任何人，可以给我一个答案，就是这样。

解决方案

把这些选择在trinidadskin.css文件（在我的情况smSkin.css）： .AFTableCellDataBackgroundColor：别名 { 背景色：＃F5F5DC; }

.AFTableCellDataBandedBackgroundColor：别名 { 背景色：#FFFFFF; }

特立尼达-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>

其他提示

有一个很好的和简单的jQuery代码来执行行高亮位于此处

在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; }

顺便说一句我把所有从下面的站点代码，您也可以观看演示。

这是没有直接回答你的问题，但为什么不使用CSS3伪类第n个孩子来达到这种效果呢？例如：

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

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

要对付你需要做以下的千里剥皮主题：

在你的web.xml，你需要这个参数设置为true，同时深化发展：

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

获取萤火虫为您的Firefox浏览器。与附加可以确定哪些特立尼达-选择器的部件上使用。

有对于用户选择的行没有选择器。我就是这么做的：给你的对象就像一个“亮点财产”，你改变，如果它是一个选择。

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

做到这一点为您表的所有列，就大功告成了。

我会向您推荐特立尼达文档。 http://myfaces.apache.org/trinidad/trinidad-api/ tagdoc / tr_table.html 在他们的榜样，他们申报的条纹作为行banding="row"我会假设你没有得到任何的理由是，如果它是行或列绑扎你还没有宣布。

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow