javascript - 使用 javascript 将自动编号添加到 HTML 表

Question

我不是 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>

这是我使用的javascript

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

 }

我找到了一些 css 代码，但这只是给每一行数字 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 上，您需要注释或删除该行:

内容: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/