HTML 和 JavaScript 自动递增数字

Question

我是 HTML 和 JavaScript 的新手。我在 HTML 中遇到了这样的问题（下面的代码只是将问题可视化，以便您轻松参考。）

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

这是一个名单，但问题是有时我需要在这个表中添加更多的名字，我必须在数字 1 前面添加，所以这意味着我必须重新编写数字列表，（例如：1 1 2 3 4 –> 1 2 3 4 5).我觉得这不是一个好方法。

注意：我不想更改列表编号从上到下的减少。这是一个 HTML 文件，所以不能应用 PHP

任何人都可以帮我把数字变成像“i”这样的变量，一个函数可以帮助我填充变量 i 自动从上到下递增，比如

<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为例：我认为在这种情况下应该使用JavaScript。感谢您对这个问题的帮助和建议。

再次：我不允许使用 PHP 或 ASP，当我添加新名称时，我通过 HTML 手动添加。

原文由 Ryan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这应该适合你：

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

脚本应紧跟在您的桌子之后。它遍历表格的每一行，并在该单元格内的递增数字的开头添加一个额外的单元格。

JSFiddle 演示

原文由 Paul 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以使用 css 计数器- 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>

小提琴

原文由 Musa 发布，翻译遵循 CC BY-SA 4.0 许可协议