Auto increment serial number in html table without jquery: Hi Friends, Today I will tell you about how to auto increment the serial number in the table without using any JavaScript or its library. As we know for incrementing anything we need to use javascript, jquery or any other language but we can do the increment work with the help of CSS.
You can use counter-reset, counter-increment property to increase the value of any number and also add some content before and after the number value.
If you use any javascript it increase our page speed as well as loading time of our website. For increasing the count, you can use CSS.
You can see the live demo and download the code from below.
For increasing the count you can follow some steps. These steps are
Open your code editor.
Paste the below code to increase the value of a number.
In the below example I have made a table in which first td is blank and in the other table td we can put data.
<table class="table table-hover table-bordered table-striped"> <thead> <tr> <th>S.no</th> <th>Name</th> <th>Job Title</th> <th>Address</th> <th>Contact Email</th> <th>Phone</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> </tbody> </table> |
<table class="table table-hover table-bordered table-striped"> <thead> <tr> <th>S.no</th> <th>Name</th> <th>Job Title</th> <th>Address</th> <th>Contact Email</th> <th>Phone</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> </tbody> </table>
In this example, first I have reset the counter, increment the counter and display the counter value in the first td. You can also add some content before and after the number.
body { counter-reset: Count-Value; } table { border-collapse: separate; } tr td:first-child:before { counter-increment: Count-Value; content: "Row:" counter(Count-Value); } |
body { counter-reset: Count-Value; } table { border-collapse: separate; } tr td:first-child:before { counter-increment: Count-Value; content: "Row:" counter(Count-Value); }
For any problem you can see the live demo and download the code from below.
Read About Other Interesting Things about jquery below.
I hope you will like Auto Increment Serial Number in HTML Table without JQuery. If You found it useful please subscribe my blog.
Categories: Website Design
Leave a Reply