CODEWITHSUNDEEP
javascripthtmldomhtml-table
Ryan
Ryan

Reputation: 141

HTML and JavaScript auto increment number

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.

Upvotes: 5

Views: 91051

Answers (7)

Merrin K
Merrin K

Reputation: 1790

Try this

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

Upvotes: 0

Musa
Musa

Reputation: 97672

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

Upvotes: 16

Bunlong
Bunlong

Reputation: 662

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

Upvotes: 1

Paul
Paul

Reputation: 141827

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

Upvotes: 6

Programming Guy
Programming Guy

Reputation: 7461

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

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

Upvotes: 1

Ryan
Ryan

Reputation: 2815

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

Upvotes: 0

Kevin S.
Kevin S.

Reputation: 306

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

Upvotes: 1

Related Questions