Auto number table rows with CSS and JS
1. CSS Method
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
2. JS method – append with a new td
<script>
var tables = document.getElementsByTagName(‘table’);
var table = tables[tables.length -1];
var rows = table.rows;
for(var i = 0, td; i < rows.length; i++){
td = document.createElement(‘td’);
td.appendChild(document.createTextNode(i + 1));
rows[i].insertBefore(td, rows[i].firstChild);
}
</script>
3. JS method – append with in first td
<script>
var table = document.getElementsByTagName(‘table’)[0],
rows = table.getElementsByTagName(‘tr’), text = ‘textContent’ in document ? ‘textContent’ : ‘innerText’;
console.log(text);
for (var i = 0, len = rows.length; i < len; i++)
{
rows[i].children[0][text] = i + ‘: ‘ + rows[i].children[0][text];
}
</script>
