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>

17 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. 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
  5. Great post!I am actually getting ready to across this information,i am very happy to this commands.Also great blog here with all of the valuable information you have.Well done,its a great knowledge.student review for Realtime Experts marathahalli bangalore



    ReplyDelete
  6. Wow it is really wonderful and awesome thus it is veWow, it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot.
    java training in chennai

    java training in omr

    aws training in chennai

    aws training in omr

    python training in chennai

    python training in omr

    selenium training in chennai

    selenium training in omr

    ReplyDelete
  7. It's a wonderful post and very helpful, thanks for all this information about Java. You are including better information regarding this topic in an effective way.Thank you so much.,thanks a lot.
    oracle training in chennai

    oracle training in tambaram

    oracle dba training in chennai

    oracle dba training in tambaram

    ccna training in chennai

    ccna training in tambaram

    seo training in chennai

    seo training in tambaram

    ReplyDelete
  8. Excellent Blog! I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. I wanted to thank you for this websites!
    oracle training in chennai

    oracle training in velachery

    oracle dba training in chennai

    oracle dba training in velachery

    ccna training in chennai

    ccna training in velachery

    seo training in chennai

    seo training in velachery


    ReplyDelete
  9. Good Post! , it was so good to read and useful to improve my knowledge as an updated one, keep blogging.After seeing your article I want to say that also a well-written article with some very good information which is very useful for the readers....thanks for sharing it and do share more posts likethis.
    https://www.3ritechnologies.com/course/selenium-online-training/

    ReplyDelete