javascript - Apply css styling for page numbering -


i need apply 1 css style number 2 using javascript. how can using javascript following html.

<tfoot> <tr class="pp-pagenumber">     <td colspan="1">         <a data-swhglnk="true" href="#">&lt;</a>         <a data-swhglnk="true" href="#">1</a>         2         <a data-swhglnk="true" href="#">3</a>         <a data-swhglnk="true" href="#">4</a>         <a data-swhglnk="true" href="#">&gt;</a>     </td> </tr> </tfoot> 

finally following image

enter image description here

as per govan suggested changed pure css. looks

enter image description here

since number 2 want style not within tag difficult style element. can filter nodes type 3 indicate text nodes , wrap in tag specified class name. can style element class name

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <table> <tfoot> <tr class="pp-pagenumber">     <td colspan="1">         <a data-swhglnk="true" href="#">&lt;</a>         <a data-swhglnk="true" href="#">1</a>         2         <a data-swhglnk="true" href="#">3</a>         <a data-swhglnk="true" href="#">4</a>         <a data-swhglnk="true" href="#">&gt;</a>     </td> </tr> </tfoot> </table>  <script> $(document).ready(function(){      $('tr.pp-pagenumber td').contents().filter(function() {         return this.nodetype === 3;     }).wrap('<a class="currentpage"></a>');        /*you can remove blank nodes if exists */     $(".currentpage").each(function(){         if($(this).html().trim()=="")             $(this).remove();     });  }); </script>  <style>  .currentpage {      background-color : green ;  }  </style> 

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    	<table>  	<tfoot>  	<tr class="pp-pagenumber">  		<td colspan="1">  			<a data-swhglnk="true" href="#">&lt;</a>  			<a data-swhglnk="true" href="#">1</a>  			2  			<a data-swhglnk="true" href="#">3</a>  			<a data-swhglnk="true" href="#">4</a>  			<a data-swhglnk="true" href="#">&gt;</a>	  		</td>  	</tr>  	</tfoot>  	</table>    	<script>  	$(document).ready(function(){  		  		$('tr.pp-pagenumber td').contents().filter(function() {  			return this.nodetype === 3;  		}).wrap('<a class="currentpage"></a>');  		  				$(".currentpage").each(function(){  			if($(this).html().trim()=="")  				$(this).remove();  		});      		  	});  	</script>    	<style>    	.currentpage {  		  		background-color : green ;   	}    	</style>


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -