javascript - 如何更改 JSF 表中的链接颜色

Question

我有一个 JSF 表:

如您所见，列的名称是基本的 html 链接。有没有办法删除名称的下划线？还要更改名称的颜色？感谢您的帮助。

<div id="settingsHashMap" style="width:1050px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">

                <h:form id="form" >
                    <p:growl id="growl" showDetail="true" sticky="true" />
                    <!-- The sortable data table -->
                    <h:dataTable onmouseover="addOnclickToDatatableRows();" id="dataTable" value="#{AccountsController.dataList}" binding="#{table}" var="item">
                        <!-- Check box -->
                        <h:column>
                            <f:facet name="header">
                                <h:selectBooleanCheckbox value="#{AccountsController.mainSelectAll}" class="checkall" >
                                    <f:ajax listener="#{AccountsController.selectAll}" render="@form" />
                                </h:selectBooleanCheckbox>
                            </f:facet>
                            <h:selectBooleanCheckbox  onclick="highlight(this)" value="#{AccountsController.selectedIds[item.userid]}" >
                                <!-- if the user deselects one row deselect the main checkbox -->
                                <f:ajax listener="#{AccountsController.deselectMain}" render="@form" />
                            </h:selectBooleanCheckbox>
                            <!-- Click on table code -->  
                            <h:outputLink id="lnkHidden" value="AccountProfile.jsf" style="text-decoration:none; color:white;">
                                <f:param name="id" value="#{item.userid}" />
                            </h:outputLink>
                        </h:column>
                        <!-- Row number -->
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="№" style="text-decoration:none;color:white;" />                                    
                            </f:facet>
                            <h:outputText value="#{table.rowIndex + AccountsController.firstRow + 1}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="User ID" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="USERID" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.userid}" />
                        </h:column>
                        <!--
                        email
                        description -->
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="Group ID" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="GROUPID" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.groupid}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="Special Number" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="SPECIALNUMBER" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.specialnumber}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="Username" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="USERNAME" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.username}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="Address" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="ADDRESS" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.address}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="State/Region" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="STATEREGION" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.stateregion}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="Country" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="COUNTRY" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.country}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="User Status" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="USERSTATUS" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.userstatus}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="Telephone" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="TELEPHONE" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.telephone}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:commandLink value="Date User Added" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
                                    <f:attribute name="sortField" value="DATEUSERADDED" />
                                    <f:ajax render="@form" />
                                </h:commandLink>
                            </f:facet>
                            <h:outputText value="#{item.dateuseradded}" />
                        </h:column>

                    </h:dataTable>

                    <!-- The paging buttons -->
                    <h:commandButton value="first" action="#{AccountsController.pageFirst}"
                                     disabled="#{AccountsController.firstRow == 0}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;


                    <h:commandButton value="prev" action="#{AccountsController.pagePrevious}"
                                     disabled="#{AccountsController.firstRow == 0}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:commandButton value="next" action="#{AccountsController.pageNext}"
                                     disabled="#{AccountsController.firstRow + AccountsController.rowsPerPage >= AccountsController.totalRows}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;    

                    <h:commandButton value="last" action="#{AccountsController.pageLast}"
                                     disabled="#{AccountsController.firstRow + AccountsController.rowsPerPage >= AccountsController.totalRows}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:outputText value="Page #{AccountsController.currentPage} / #{AccountsController.totalPages}" />
                    <br />

                    <!-- The paging links -->
                    <ui:repeat value="#{AccountsController.pages}" var="page">
                        <h:commandLink value="#{page}" actionListener="#{AccountsController.page}"
                                       rendered="#{page != AccountsController.currentPage}" style="text-decoration:none;color:white;">
                            <f:ajax render="@form" execute="@form"></f:ajax>   
                        </h:commandLink>
                        <h:outputText value="#{page}" escape="false"
                                      rendered="#{page == AccountsController.currentPage}" style="text-decoration:none;color:white;"/>
                    </ui:repeat>
                    <br />

                    <!-- Set rows per page -->
                    <h:outputLabel for="rowsPerPage" value="Rows per page" />
                    <h:inputText id="rowsPerPage" value="#{AccountsController.rowsPerPage}" size="3" maxlength="3" />
                    <h:commandButton value="Set" action="#{AccountsController.pageFirst}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;
                    <h:message for="rowsPerPage" errorStyle="color: red;" />

                    <!-- hidden button -->
                    <h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
                        <f:ajax render="@form"></f:ajax>
                    </h:commandButton>

                    <!-- the delete button -->
                    <h:button value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />

                    <script type="text/javascript" src="resources/js/tabs.js"></script> 
                </h:form>                    
            </div>   

            <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

            </div>  
        </div>  

Answer 1

像这样添加 CSS 样式:

<h:commandLink value="This is a link" style="text-decoration:none;color:red;" />