Adding autonumber to HTML table using javascript

Question

I'm not new to html per say but I'm definitly not experienced in it and also definitly not in javascript.

I have this table with a textbox and anytime you enter something in the textbox and press the Voeg toe button it gets added to the 2nd column which is correct. However I would like there to be an autonumber in the first column, I've tried multiple thing but cant seem to make it work.

     <div id="wrapper">
  <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
    <tr>
      <th>Volgnummer</th>
      <th>Serienummer</th>
    </tr>
    <tr>
      <td><input type="text" id="new_name"></td>
      <td><input type="button" class="add" onclick="add_row();" value="Voeg toe">
          <input type ="button" onclick="scan_barcode();"value="Scan barcode" >
      </td>
    </tr>

  </table>
</div>

This is the javascript im using

    function add_row()
{
 var new_name=document.getElementById("new_name").value;


 var table=document.getElementById("data_table");
 var table_len=(table.rows.length)-1;
 var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td></td><td id='name_row"+table_len+"'>"+new_name+"</td></tr>";

 document.getElementById("new_name").value="";

 }

I found some css code but all this does is give every row the number 0 instead of 0,1,2 etc etc

}

table tr {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

the javascript code does work for auto-incrementing the id, could you explain what you want more thoroughly if that isn't what you meant. — Kevin Kloet
– Kevin Kloet, Commented Dec 22, 2016 at 10:31
Why can't you just add a new counter variable into your existing Javascript code and use that to create the autonumber? — Atrix
– Atrix, Commented Dec 22, 2016 at 10:38

deChristo · Accepted Answer · 2016-12-22 10:40:35Z

1

Here:

On your css you need to comment or delete the line:

content: counter(rowNumber);

and change your javascript:

 var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td>"+table_len+"</td><td id='name_row"+table_len+"'>"+new_name+"</td></tr>";

JSFiddle: https://jsfiddle.net/hrm8k8kh/

answered Dec 22, 2016 at 10:40

deChristo

1,8882 gold badges21 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Adding autonumber to HTML table using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related