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>
Your tutorial is nice, i also wrote tutorial how to add auto number in HTML table rows, hope you like it.
ReplyDeletehttps://htmlcssphptutorial.wordpress.com/2015/07/08/automatic-serial-number-zebra-striping-in-html-table-rows-with-css/
Thanks Javed Ur Rehman !!
Deletethe css method really helpful. thank you very much :)
ReplyDeleteThank You Amra :)
Deleteworks great thx. Is there any way to exclude the th (header)?
ReplyDeleteThank You Steve :)
DeleteI want the serial numbers to start from second row. How can I get it?
ReplyDeletevar tables = document.getElementsByTagName('table');
Deletevar 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);
}
I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing..
ReplyDeleteBelieve 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
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
ReplyDeleteHi, This is your awesome article , I appreciate your effort, thanks for sharing us.
devops training in chennai | devops training in anna nagar | devops training in omr | devops training in porur | devops training in tambaram | devops training in velachery
This tutorial useful for me. This is excellent information. It is amazing and wonderful to visit your site. I appreciate your effort, thanking you.
ReplyDeletepython training in chennai
python online training in chennai
python training in bangalore
python training in hyderabad
python online training
python flask training
python flask online training
python training in coimbatore
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.
ReplyDeletejava 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
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.
ReplyDeleteoracle 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
It is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot.
ReplyDeletesap training in chennai
sap training in annanagar
azure training in chennai
azure training in annanagar
cyber security course in chennai
cyber security course in annanagar
ethical hacking course in chennai
ethical hacking course in annanagar
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!
ReplyDeleteoracle 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
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.
ReplyDeletehttps://www.3ritechnologies.com/course/selenium-online-training/