HTML and JavaScript auto increment number

Question

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.

AAAARRRRRGGGGGGG!!!!! TD's and TR's!!! lol jk, where is the data coming from that has the names in the name fields? — Ryan
– Ryan, Commented Jun 14, 2012 at 3:30
The data have to add by myself, type it. This is not come from any database — Ryan
– Ryan, Commented Jun 14, 2012 at 3:32

RunninglVlan · Accepted Answer · 2018-05-24 09:15:15Z

16

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

edited May 24, 2018 at 9:15

RunninglVlan

1662 silver badges13 bronze badges

answered Jun 14, 2012 at 3:41

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Programming Guy Over a year ago

Very cool, but not compatible with older browsers. The OP may not care though.

Fabrício Matté Over a year ago

I even added some jQuery to test, impressive dynamic counting.

Ryan Over a year ago

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 Over a year ago

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

Musa Over a year ago

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

|

Paul · Accepted Answer · 2012-06-14 03:49:46Z

6

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

edited Jun 14, 2012 at 3:49

answered Jun 14, 2012 at 3:34

Paul

142k28 gold badges285 silver badges272 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:08:44Z

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

Programming Guy · Accepted Answer · 2012-06-14 03:46:16Z

1

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

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

answered Jun 14, 2012 at 3:46

Programming Guy

7,47911 gold badges53 silver badges61 bronze badges

Comments

Bunlong · Accepted Answer · 2012-06-14 03:53:16Z

1

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

answered Jun 14, 2012 at 3:53

Bunlong

6621 gold badge9 silver badges22 bronze badges

Comments

Ryan · Accepted Answer · 2012-06-14 03:43:09Z

I would say do this (im going to assume you are not going to load in jquery or anything fancy):

<html>
<head>
<script type="text/javascript>
function writeTable(){
// list of names
var myList = [ "name1", "name2", "etc", "etc"];
// your variable to write your output
var outputTable = "<table>";
//the div to write the output to
var outputDiv = document.getElementById("output");
//the loop that writes the table
for (var i=0; i<myList.length; i++){
   outputTable += "</tr><td>"+i+"</td><td>"+myList[i]+"</td></tr>";
}
//close the table
outputTable += "</table>";
//write the table
outputDiv.innerHTML = outputTable;
}
</script>
</head>
<body onload=writeTable()>
<div id='output'></div>
</body>
</html>

hope this helps :)

Merrin K · Accepted Answer · 2022-01-20 06:53:52Z

0

Try this

$(document).ready(function() {
    var addSerialNumber = function () {
        $('table tr').each(function(index) {
            $(this).find('td:nth-child(1)').html(index);
        });
    };
    addSerialNumber();
 });

answered Jan 20, 2022 at 6:53

Merrin K

1,7901 gold badge19 silver badges32 bronze badges

Collectives™ on Stack Overflow

HTML and JavaScript auto increment number

7 Answers 7

6 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related