Auto Increment Serial Number in HTML Table without JQuery

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.

Auto Increment Serial Number in HTML Table without JQuery (Only CSS):

You can see the live demo and download the code from below.

Auto Increment Serial Number in HTML Table with CSS:

For increasing the count you can follow some steps. These steps are

Step1:

Open your code editor.

Step2:

Paste the below code to increase the value of a number.

HTML Code:

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>

CSS Code:

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);
}

For any problem you can see the live demo and download the code from below.

Now you know about How To Get Auto Increment Serial Number in HTML Table with CSS Only

Read About Other Interesting Things about jquery below.

• Sliding Div When Scroll Down Page Using Jquery
• Disable Mouse Right Click Using Jquery
• Responsive Jquery Read More Feature Without Plugin
• Marquee Animation Without Marquee tag
• Add 3D Menu Effects To Your Website Using Jquery
• Rumbles, Vibrates, Shakes, And Rotates Any Element Using Jquery Plugin
• Fancy Effects To Input Fields Using Jquery Plugin
• Add Diwali Fireworks Using Jquery In Your Website
• Zoom Image On Hover Using CSS Without Jquery
• Pure HTML CSS Slider Without JavaScript or Jquery
• Create Country State And City Dropdown Using Jquery
• Learn JQUERY Code Step By Step For Beginners
• Create Expand Collapse Sliding Menu Using jQuery
• Jquery Me Simple Slider Kaise Bnate Hai
• Add CKEditor in Html Form using Jquery
• Avoid Spammers With Motion CAPTCHA Using JQuery
• Stop Double Form Submission Using Jquery and Ajax
• Simple Text Slider Using Jquery Slide Function

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