Nested CSS Counters in table

Here are the example code for using Nested CSS Counters.

by Satheesh Kumar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-block">Add row</button>

<table class="table" id="myTable">
<thead>
  <tr>
    <th>s.no</th>
      <th>cell 1</th>
        <th>cell 2</th>
    <th>cell 3</th>
    </tr>
  
</thead>
    <tbody>
    
    </tbody>

CSS

table, button {
	margin-top:20px;
}


tbody {
    counter-reset: section;
}

tr {
    counter-reset: subsection;
}
h4::before {
    counter-increment: section;
    content:  counter(section);
}

h5::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

JavaScript

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');


$('button').click(function(){
    //Add row
   table.append('<tr><td><h4></h4></td><td><h5></h5></td><td><h5></h5></td><td><h5></h5></td></tr>');
});