javascript - 自动将序列号添加到表格行

Question

你好我有一个动态表，它显示了从数字 1 到 20 的足球俱乐部列表，我试图通过 javascript 或 css 自动将 psoition 数字分配给位置行，我已经做了一些搜索但还没有看到任何有用的东西，所以我问如何去做。这是我的 table

<table width="100%">
        <tr style="color:#fff" bgcolor="#FF0099">
          <td>Pos</td>
          <td>Club</td>
          <td>Pts</td>
          <td>P</td>
          <td>W</td>
          <td>D</td>
          <td>L</td>
          <td>GD</td>
          <td>&nbsp;</td>
        </tr>
        <?php do { ?>
        <tr style="color:#FFf" bgcolor="#00a99d">
          <td bgcolor="#00a99d"></td>
          <td><?php echo $row_tab['Club']; ?></td>
          <td><?php echo $row_tab['Pts']; ?></td>
          <td><?php echo $row_tab['Pld']; ?></td>
          <td><?php echo $row_tab['W']; ?></td>
          <td><?php echo $row_tab['d']; ?></td>
          <td><?php echo $row_tab['L']; ?></td>
          <td><?php echo $row_tab['Gd']; ?></td>
          <td><a href="table_update.php?id=<?php echo $row_tab['id']; ?>">Administer</a></td>
        </tr>
        <?php } while ($row_tab = mysql_fetch_assoc($tab)); ?>
      </table>
      <p>&nbsp;</p></td>
  </tr>
</table>

Answer 1

试试这个 css 样式(不需要 javascript):

table {
    counter-reset: rowNumber;
}

table tr {
    counter-increment: rowNumber;
}

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

这里是 demo

更新

要指定表格，首先要为表格添加一个 id 或 class:

<table width="100%" id="team-list">

修改样式:

table#team-list {
    counter-reset: rowNumber;
}

table#team-list tr:nth-child(n+1) {
    counter-increment: rowNumber;
}

table#team-list tr:nth-child(n+1) td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

其中 n+1 是它应该开始索引的数字。 例如:n+10 从第 10 行开始计数。