javascriptを使用してHTMLテーブルに自動番号を追加する

Question

私はhtmlに言わずに新しくはありませんが、私はそれに精通していないと確信してjavascriptでもないです。

私はテキストボックスでこのテーブルを持っています。テキストボックスに何かを入力し、Voegトーボタンを押すと、それは正しい第2列に追加されます。しかし、私は最初の列にオートナンバーがあることを望みます。私は複数のことを試しましたが、それを動作させることはできません。

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

これは私はいくつかのCSSコード見出さ

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=""; 

} 

を使用するJavaScript IMであるが、このすべてが行うには、すべての行に番号0の代わりに0,1,2などなど

} 

table tr { 
    counter-increment: rowNumber; 
} 

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

を与えることです

Answer 1

ここをクリックしてください：

あなたのCSSであなたはコメントするか削除する必要があります：

content: counter(rowNumber);

とあなたの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/