javascript - HTML/Javascript 中的行数

Question

我想知道是否有一种简单的方法可以将数字实现到我的 HTML/Javascript 表中。

这是当前代码:

<table style="width:75%", border="2">

    <th>Club</th>
    <th>Points</th>
    <th>Played Games</th>

    {% for team, score, game in data %}
    <tr>
    <td><strong>{{team}}</strong> </td>
    <td><emph> {{score}}</emph> <br/></td>
    <td>{{game}}</td>
    {% endfor %}
    </tr>

</table>

我不会发布我的 python/flask 代码，因为我认为没有必要。

我想做的就是添加一个从 1 到末尾的位置列。

请告诉我!

谢谢!

Answer 1

如果您不想修改循环代码，则可以使用 counter 通过 CSS 原生实现此目的。这是一个实例:

table {
  counter-reset: position;
  width: 75%;
}

table td:first-child:before {
  counter-increment: position;
  content: counter(position);
}

<table border="2">

  <tr>
    <th>Position</th>
    <th>Club</th>
    <th>Points</th>
    <th>Played Games</th>
  </tr>

  <tr>
    <td></td>
    <td><strong>Team</strong></td>
    <td><emph>Score</emph><br/></td>
    <td>Game</td>
  </tr>

  <tr>
    <td></td>
    <td><strong>Team</strong></td>
    <td><emph>Score</emph><br/></td>
    <td>Game</td>
  </tr>

  <tr>
    <td></td>
    <td><strong>Team</strong></td>
    <td><emph>Score</emph><br/></td>
    <td>Game</td>
  </tr>

</table>