HTML and JavaScript auto increment number

javascript html dom html-table

77,921

Solution 1

This should work for you:

<table>
  <tr>
    <td>Harry</td>
  </tr>
  <tr>
    <td>Simon</td>
  </tr>
  <tr>
    <td>Maria</td>
  </tr>
  <tr>
    <td>Victory</td>
  </tr>
</table>
<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>

The script should be placed immediately after your table. It goes through each row of your table and adds an extra cell to the beginning with the incrementing number inside that cell.

JSFiddle Demo

Solution 2

You can use a css counter - MDN

table {
  counter-reset: section;
}

.count:before {
  counter-increment: section;
  content: counter(section);
}

<table>
  <tr>
    <td class="count"></td>
    <td>Harry</td>
  </tr>
  <tr>
    <td class="count"></td>
    <td>Simon</td>
  </tr>
  <tr>
    <td class="count"></td>
    <td>Maria</td>
  </tr>
  <tr>
    <td class="count"></td>
    <td>Victory</td>
  </tr>
</table>

FIDDLE

Solution 3

Edit: seems like the other solution posted would work do (was added while I typed this up).

You really should be using PHP to do something dynamic like this, which would become trivial with a single for loop.

However, if you insist on using HTML/Javascript (or perhaps this is a 'static page'...) then what you are asking should be possible.

You could add a class to each of the <td> elements you want to use, so:

<tr>
    <td class='personid'>i</td>
    <td>Harry</td>
</tr>
<tr>
    <td class='personid'>i</td>
    <td>Simon</td>
</tr>
    <td class='personid'>i</td>
    <td>Maria</td>
</tr>
</tr>
    <td class='personid'>i</td>
    <td>Victory</td>
</tr>

Then you would have a javascript function that does something like this:

var list = document.getElementsByClassName("personid");
for (var i = 1; i <= list.length; i++) {
    list[i].innerHTML = i;
}

Solution 4

Are you sure you don't want an ordered list?

<ol>
  <li>Fred</li>
  <li>Barry</li>
</ol>

Solution 5

<script>
function addRow(index, name){
    var tbody = document.getElementById("nameList");
    var row = document.createElement("tr");
    var data1 = document.createElement("td");
    data1.appendChild(document.createTextNode(index));
    var data2 = document.createElement("td");
    data2.appendChild(document.createTextNode(name));
    row.appendChild(data1);
    row.appendChild(data2);
    tbody.appendChild(row);
}
var name=new Array();
name[0]="Harry";
name[1]="Simon";
name[2]="Maria";
name[3]="Victory";
for(var i=0; i < name.length; i++) {
    addRow(i,name[i]);
}
</script>
<html>
<body>
<table id="nameList">
</table>
</body>
</html>

View more solutions

77,921

Author by

Ryan

Updated on July 05, 2022

Comments

Ryan almost 2 years
I am new to HTML and JavaScript. I got a problem like this in HTML (This code below only visualize the problem for you to easy to reference.)
```
<tr>
    <td>1</td>
    <td>Harry</td>
</tr>
<tr>
    <td>2</td>
    <td>Simon</td>
</tr>
    <td>3</td>
    <td>Maria</td>
</tr>
</tr>
    <td>4</td>
    <td>Victory</td>
</tr>
```
This is a name list, however the problem is that sometime i need to add more name into this table and I HAVE TO ADD in front of Number 1, so meaning i have to re-write the number list, (EX: 1 1 2 3 4 --> 1 2 3 4 5). I feel that is not a good way.

NOTE: I don't want to change the list number decrease from top to bottom. And this is a HTML file so can't apply PHP

Anyone can help me to make the number to a variable like "i" and a function can help me to fill variable i increment from top to bottom automatically like
```
<tr>
    <td>i</td>
    <td>Harry</td>
</tr>
<tr>
    <td>i</td>
    <td>Simon</td>
</tr>
    <td>i</td>
    <td>Maria</td>
</tr>
</tr>
    <td>i</td>
    <td>Victory</td>
</tr>
```
Function Fill_i for example: I think that JavaScript should be used in this case. Thanks for your help and suggestion on this problem.

Again: I am not allowed to use PHP or ASP and when I add a new name, I add it manually by HTML.
Programming Guy almost 12 years

Very cool, but not compatible with older browsers. The OP may not care though.
Fabrício Matté almost 12 years

I even added some jQuery to test, impressive dynamic counting.
Ryan almost 12 years

Dear Musa, Thanks for your cool answer! May i ask for one more question. If i have 3 table in 1 page, what should i do? Because after the end to first table, i want to reset the number count to 1 and start in second table from 1. Thanks so much if you have more solution for us to reference
Musa almost 12 years

@Ryan just set the counter to reset on table elements-see edit.
Ryan almost 12 years

@Musa, do you mean like this, set another name for section and put properties 0, i tried it but doesn't work, please help in more detailsbody {counter-reset:section;} .count:before { counter-increment:section; content:counter(section); } body {counter-reset:section1 0} .count2:before { counter-increment:section1; content:counter(section1); }
Musa almost 12 years

@Ryan Take a look at the code in the answer and see it in action in the fiddle