Question

你好我有一个动态表，显示一个数字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>

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或类：

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

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

Answer 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                
        })

    }

希望它喜欢你

Answer 4

这是另一种方法来做纯CSS没有Javascript

＆＃13;

 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 */
        }

＆＃13;

自动将序列号添加到表行

4 个答案:

更新