JSF2.0JavaScript和CSS表_Javascript_Css_Jsf 2

JSF2.0JavaScript和CSS表

javascript css jsf-2

JSF2.0JavaScript和CSS表,javascript,css,jsf-2,Javascript,Css,Jsf 2,我是JSF2.0新手，在js/css事件方面遇到了麻烦。基本上我有以下html代码：  <style type="text/css"> table.hovertable { font-family: verdana,arial,sans-serif; font-size:11px; color:#3

我是JSF2.0新手，在js/css事件方面遇到了麻烦。基本上我有以下html代码：

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.hovertable tr {
    background-color:#d4e3e5;
}
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
</style>

<!-- Table goes in the document BODY -->

<table class="hovertable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td id="here">Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>


桌子{
字体系列：verdana、arial、无衬线字体；
字体大小：11px；
颜色：#333333；
边框宽度：1px；
边框颜色：#999999；
边界塌陷：塌陷；
}
表4.4.4.4.4.4表4{
背景色：#c3dde0；
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#a9c6c9；
}
table.hovertable tr{
背景色：#d4e3e5；
}
table.hovertable td{
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#a9c6c9；
}
信息标题1信息标题2信息标题3
项目1A项目1B项目1C
项目2a项目2b项目2C
项目3a项目3b项目3C
项目4AItem 4BItem 4C
项目5A项目5B项目5C

它呈现一个简单的表，在“mouseover”上更改其颜色。我想将其“转换”为JSF 2.0代码，如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />

    </h:head>

    <h:body>

        <h1>JSF 2.0 + Spring + Hibernate :)</h1>

        <h:dataTable value="#{cBean.getcBeanList()}" var="c"
                 styleClass="hovertable"
                 >
            <h:column>
                <f:facet name="header" id="h1">Info Header 1</f:facet>#{c.cBeanId}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 2</f:facet>#{c.name}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 3</f:facet>#{c.address}
            </h:column>

        </h:dataTable>

    </h:body>
</html>


JSF2.0+Spring+Hibernate:）
信息头1{c.cBeanId}
信息头2#{c.name}
信息头3#{c.address}

但包括

onmouseover

事件

另外，

cBean.getcBeanList（）

返回一个

List

好吧，我想就这些，我希望你能帮助我。

提前感谢。

获取该功能最简单的方法是使用RichFaces。为您提供onRowMouseOver和其他选项。您可以将其用作：

<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

否则，您将不得不编写一些javascript。看看这个论坛帖子：（参考Munish K Singh的回复-第4次回复）

如果你想了解IE6用户，只需使用

：hover

伪选择器。将以下内容添加到CSS中

table.hovertable tbody tr:hover {
    background: #ffff66;
}

如果您确实因为一些不明显的原因而关心它们，请使用JavaScript

var trs = document.getElementById('dataTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].onmouseover = new Function("this.bgColor = '#ffff66'");
    trs[i].onmouseout = new Function("this.bgColor = '#d4e3e5'");
}

对于使用jQuery的情况，这在函数中是可能的

$('.hovertable tbody tr').hover(
    function() { this.bgColor = '#ffff66'; },
    function() { this.bgColor = '#d4e3e5'; }
);

richfaces在JSF2.0中存在问题

$('.hovertable tbody tr').hover(
    function() { this.bgColor = '#ffff66'; },
    function() { this.bgColor = '#d4e3e5'; }
);