自动将序列号添加到表格行答案

【问题标题】：automatically add serial numbers to table rows自动将序列号添加到表格行
【发布时间】：2026-02-16 19:00:01
【问题描述】：

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

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

【问题讨论】：

为什么？ trs 已经拥有 rowIndex 属性。
你要Jquery代码
为什么不直接通过 php 变量打印出行号？
请写下你的意思；）。无论如何，tds 也有 cellIndex。
如果你想对列进行编辑，你应该再次编辑你的问题

标签： javascript html css

【解决方案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 或类：

<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 行开始计数。

【讨论】：

很酷，但是我可以指定一个特定的表吗，因为我有差异表，还可以指定它开始的行，谢谢
你，先生，简直让我大吃一惊。我从来没有想过这样做！

【解决方案2】：

    <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
//declare your counter here
 do {
//increase your counter by 1 here
 ?>
            <tr style="color:#FFf" bgcolor="#00a99d">
              <td bgcolor="#00a99d"><<Use your counter here>></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>

【讨论】：

【解决方案3】：

序列号试试这个。

function recalcId() {           
        $.each($("#tblEmpData tr:not(:first)"), function (i, el) {
            $(this).find("td:first").text(i + 1); // Simply couse the first "prototype" is not counted in the list                
        })

    }

希望它喜欢你

【讨论】：

谢谢，但我见过这样的东西，它感觉不到我的要求，因为它从我希望它开始的特定行开始，使用此代码，标题 pos 也是计数

【解决方案4】：

这是纯 CSS 没有 Javascript 的另一种方式

 body {
            counter-reset: Serial;   /* Set the Serial counter to 0 */
        }
        table {
            border-collapse: separate;
        }
        tr td:first-child:before {
            counter-increment: Serial;      /* Increment the Serial counter */
            content:counter(Serial); /* Display the counter */
        }

【讨论】：