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号前添加,所以这意味着我不得不重新编写号码列表,(EX: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>

函数Fill_i例如:我认为在这种情况下应该使用JavaScript.感谢您对此问题的帮助和建议.

再说一遍:我不允许使用PHP或ASP,当我添加新名称时,我会手动添加HTML.

Answer 1

您可以使用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>

小提琴

Answer 2

这应该适合你:

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