使用javascript向HTML表添加自动编号

我对html并不陌生，但我绝对没有这方面的经验，也绝对没有javascript方面的经验

我有一个带有文本框的表格，每当你在文本框中输入内容并按下Voeg toe按钮时，它就会被添加到第二列，这是正确的。然而，我想有一个自动编号在第一列，我已经尝试了多种事情，但似乎无法使它的工作

     <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上，您需要注释或删除以下行：

内容：计数器（行号）

并更改您的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>";

var row=table.insertRow（table_len）.outerHTML=”“+table_len+“”+new_name+“”；

JSFiddle:
javascript代码确实可以自动递增id，如果这不是您的意思，您能否更详细地解释一下您想要什么。为什么您不能在现有javascript代码中添加一个新的计数器变量，并使用它来创建自动编号？
}

table tr {
    counter-increment: rowNumber;
}

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

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