I have a JSF table:
As you can see the names of the columns are basic html links. Is there a way to remove the underlining of the names? And also to change the color of the names? Thank you for the help.
<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:mandLink value="User ID" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="USERID" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.userid}" />
</h:column>
<!--
email
description -->
<h:column>
<f:facet name="header">
<h:mandLink value="Group ID" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="GROUPID" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.groupid}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Special Number" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="SPECIALNUMBER" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.specialnumber}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Username" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="USERNAME" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.username}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Address" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="ADDRESS" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.address}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="State/Region" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="STATEREGION" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.stateregion}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Country" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="COUNTRY" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.country}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="User Status" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="USERSTATUS" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.userstatus}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Telephone" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="TELEPHONE" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.telephone}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Date User Added" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="DATEUSERADDED" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.dateuseradded}" />
</h:column>
</h:dataTable>
<!-- The paging buttons -->
<h:mandButton value="first" action="#{AccountsController.pageFirst}"
disabled="#{AccountsController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value="prev" action="#{AccountsController.pagePrevious}"
disabled="#{AccountsController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value="next" action="#{AccountsController.pageNext}"
disabled="#{AccountsController.firstRow + AccountsController.rowsPerPage >= AccountsController.totalRows}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value="last" action="#{AccountsController.pageLast}"
disabled="#{AccountsController.firstRow + AccountsController.rowsPerPage >= AccountsController.totalRows}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:outputText value="Page #{AccountsController.currentPage} / #{AccountsController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{AccountsController.pages}" var="page">
<h:mandLink value="#{page}" actionListener="#{AccountsController.page}"
rendered="#{page != AccountsController.currentPage}" style="text-decoration:none;color:white;">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandLink>
<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:mandButton value="Set" action="#{AccountsController.pageFirst}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
<!-- hidden button -->
<h:mandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
<f:ajax render="@form"></f:ajax>
</h:mandButton>
<!-- 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>
I have a JSF table:
As you can see the names of the columns are basic html links. Is there a way to remove the underlining of the names? And also to change the color of the names? Thank you for the help.
<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:mandLink value="User ID" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="USERID" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.userid}" />
</h:column>
<!--
email
description -->
<h:column>
<f:facet name="header">
<h:mandLink value="Group ID" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="GROUPID" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.groupid}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Special Number" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="SPECIALNUMBER" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.specialnumber}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Username" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="USERNAME" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.username}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Address" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="ADDRESS" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.address}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="State/Region" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="STATEREGION" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.stateregion}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Country" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="COUNTRY" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.country}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="User Status" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="USERSTATUS" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.userstatus}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Telephone" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="TELEPHONE" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.telephone}" />
</h:column>
<h:column>
<f:facet name="header">
<h:mandLink value="Date User Added" actionListener="#{AccountsController.sort}" style="text-decoration:none;color:white;">
<f:attribute name="sortField" value="DATEUSERADDED" />
<f:ajax render="@form" />
</h:mandLink>
</f:facet>
<h:outputText value="#{item.dateuseradded}" />
</h:column>
</h:dataTable>
<!-- The paging buttons -->
<h:mandButton value="first" action="#{AccountsController.pageFirst}"
disabled="#{AccountsController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value="prev" action="#{AccountsController.pagePrevious}"
disabled="#{AccountsController.firstRow == 0}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value="next" action="#{AccountsController.pageNext}"
disabled="#{AccountsController.firstRow + AccountsController.rowsPerPage >= AccountsController.totalRows}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:mandButton value="last" action="#{AccountsController.pageLast}"
disabled="#{AccountsController.firstRow + AccountsController.rowsPerPage >= AccountsController.totalRows}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:outputText value="Page #{AccountsController.currentPage} / #{AccountsController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{AccountsController.pages}" var="page">
<h:mandLink value="#{page}" actionListener="#{AccountsController.page}"
rendered="#{page != AccountsController.currentPage}" style="text-decoration:none;color:white;">
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandLink>
<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:mandButton value="Set" action="#{AccountsController.pageFirst}" >
<f:ajax render="@form" execute="@form"></f:ajax>
</h:mandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
<!-- hidden button -->
<h:mandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
<f:ajax render="@form"></f:ajax>
</h:mandButton>
<!-- 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>
1 Answer
Reset to default 5Add the CSS style like this:
<h:mandLink value="This is a link" style="text-decoration:none;color:red;" />