How to index html table rows or how to Auto-number table rows?

CSS: Method 1


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


JS: Method 2 (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>

JS: Method 3 (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>

13 comments:

  1. the css method really helpful. thank you very much :)

    ReplyDelete
  2. works great thx. Is there any way to exclude the th (header)?

    ReplyDelete
  3. I want the serial numbers to start from second row. How can I get it?

    ReplyDelete
    Replies
    1. var tables = document.getElementsByTagName('table');
      var table = tables[tables.length -1];
      var rows = table.rows;
      for(var i = 1, td; i < rows.length; i++){
      td = document.createElement('td');
      td.appendChild(document.createTextNode(i));
      rows[i].insertBefore(td, rows[i].firstChild);
      }

      Delete
  4. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.
    Java training in Chennai

    Java training in Bangalore

    ReplyDelete
  5. Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.
    Best Devops Training in pune
    Microsoft azure training in Bangalore
    Power bi training in Chennai

    ReplyDelete
  6. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing..
    Believe me I did wrote an post about tutorials for beginners with reference of your blog. 




    Selenium training in bangalore
    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

    ReplyDelete
  7. After reading this web site I am very satisfied simply because this site is providing comprehensive knowledge for you to audience.
    Thank you to the perform as well as discuss anything incredibly important in my opinion. We loose time waiting for your next article writing in addition to I beg one to get back to pay a visit to our website in



    selenium training in Bangalore
    selenium training in Marathahalli
    selenium training in Btm layout
    selenium training in Jaya nagar
    selenium training in Electronic city
    selenium training in Kalyan nagar

    ReplyDelete