2

我使用 JSF 2.0 创建了一个页面。以下是我所拥有的

<h:dataTable id="patentDetailsList" value="#{PersonalInformationDataBean.getAllPatentInfo()}"
             var="patentInfo" bgcolor="#F1F1F1" border="8" cellpadding="5"
             cellspacing="3" width="100%">
    <f:facet name="header">
        <h:outputText value="Patent Information" />
    </f:facet>

    <h:column>
        <f:facet name="header">
            <h:outputText value="ID" />
        </f:facet>
        <h:outputText value="#{patentInfo.personalInfoId}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
        <h:commandLink value="#{patentInfo.fullName}" action="#{PersonalInformationDataBean.takeMeToAnotherPage('patentss')}">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandLink>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Email ID" />
        </f:facet>
        <h:outputText value="#{patentInfo.emailID}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Mobile Number" />
        </f:facet>
        <h:outputText value="#{patentInfo.mobileNumber}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Action" />
        </f:facet>
        <h:commandButton value="Edit" action="#{PersonalInformationDataBean.setEditPersonalInfo()}" onclick="return confirm('Are you sure you want to edit?')">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandButton>
        <h:commandButton value="Delete" action="#{PersonalInformationDataBean.deletePersonalInfo()}" onclick="return confirm('Are you sure you want to delete?')">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandButton>
    </h:column>
</dataTable>

在CSS中，我有

body {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

a {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

input {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

让 MAD 变得疯狂的是，字体和大小被应用于所有文本和链接，除了按钮。编辑和删除按钮不会像其他按钮一样出现。

知道我做错了什么吗？

我知道使用styleClass我可以做到这一点，但是如果我使用它，styleClass我将不得不写每个地方，这是更多的工作。

更新 1

生成的 HTML 是

<table id="patentDetailsList" bgcolor="#F1F1F1" border="8" cellpadding="5" cellspacing="3" width="100%">
    <thead>
    <tr><th colspan="5" scope="colgroup">Patent Information</th></tr>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email ID</th>
        <th scope="col">Mobile Number</th>
        <th scope="col">Action</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:0:j_idt71':'patentDetailsList:0:j_idt71'},'');return false">Fahim Parkar</a></td>
        <td>parkarfahim22@yahoo.co.in</td>
        <td>66991234</td>
        <td><input type="submit" name="patentDetailsList:0:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:0:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:1:j_idt71':'patentDetailsList:1:j_idt71'},'');return false">Fahad Parkar</a></td>
        <td>parkarfahad7@gmail.com</td>
        <td>88888888</td>
        <td><input type="submit" name="patentDetailsList:1:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:1:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:2:j_idt71':'patentDetailsList:2:j_idt71'},'');return false">Patent First</a></td>
        <td>patent@yahoo.com</td>
        <td>66991234</td>
        <td><input type="submit" name="patentDetailsList:2:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:2:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    </tbody>
</table>
4

3 回答 3

2

试试这个

input[type=submit] {
/*Your CSS Goes Here*/
}

/*For text+submit*/
input[type=submit], input[type=text] {
/*Your CSS Goes Here*/
}

/*For Textarea*/

textarea {  /*For All Text Area*/
/* CSS Goes Here */
}

textarea.only_one_textarea {  /*This will apply to thextarea with class .only_one_textarea. See ref 1*/
/* CSS Goes Here */
}

<!--Ref 1-->
<textarea class="only_one_textarea"></textarea>
于 2012-07-21T12:02:14.830 回答
1

您的代码应该可以工作，但似乎有一个 CSS 规则在起作用，它比您的定义更具体。这是一个有点老套的解决方案，但可能会奏效。

#patentDetailsList input[type="submit"],
#patentDetailsList input[type="text"],
#patentDetailsList textarea{
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

重要的部分是过于具体的选择器。您还可以尝试以下选择器：

form input
#patentDetailsList input[type="submit"]
#patentDetailsList input
form table#patentDetailsList input[type="submit"]

这不是一个确定的解决方案，但可能有效，如果没有，您可以发布为页面生成的其他 css，和/或该表的整个 dom 树。

于 2012-07-21T11:59:15.427 回答
0 
<div style="position: absolute; left: 0px; top: 0px; width: 247px; height: 88px; overflow: hidden; -webkit-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171); "></div>
于 2012-08-02T07:38:36.363 回答