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="#"><</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="#">></a> </td> </tr> </tfoot>
finally following image
as per govan suggested changed pure css. looks
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="#"><</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="#">></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="#"><</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="#">></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
Post a Comment