用数字标记 HTML 表格的每一行 (PHP + MYSQL)答案

【问题标题】：Label each row of an HTML table numerically (PHP + MYSQL)用数字标记 HTML 表格的每一行 (PHP + MYSQL)
【发布时间】：2011-10-28 03:50:41
【问题描述】：

我想要的只是表格中每一行的第一列显示当前行的编号。例如，请看下表。

列标题 1 列标题 2 1 一些数据 2 更多数据 3 更多数据 4 更多数据

我熟悉 JavaScript（我很可能理解任何发布的 JS 脚本）、CSS 和 HTML。我很好奇我是否必须编写一个 JS 函数来执行此操作，或者我是否可以以某种方式创建一个变量并将其索引每次增加“1”。

期待您的回复！

【问题讨论】：

通常，如果您正在加载数据，它将来自像 PHP 这样的服务器端预处理语言，除非您计划异步检索数据。你在什么环境工作？

标签： php html html-table row

【解决方案1】：

如果您使用的是 PHP，请尝试获取要输出的数据的字符串数组：

$data = array('here', 'is', 'some', 'data');

// Avoid printing table if there is no data
if (count($data) > 0) {
    echo '<table><tr><td>Column Header 1</td><td>Column Header 2</td></tr>';
    for ($i = 0; $i < count($data); $i++) {
        echo '<tr><td>', $i + 1, '</td><td>', $data[$i], '</td></tr>';
    }
    echo '</table>';
}

【讨论】：

一针见血！完美！
edit：如果您正在读取数据，最好确保它存在以避免打印没有行的表格。

【解决方案2】：

尝试 CSS 自动编号

http://www.w3.org/TR/CSS2/generate.html#counters

这是客户端解决方案。如果您不能在服务器端执行此操作，请使用它。

【讨论】：

【解决方案3】：

必须是表格吗，还是可以使用ol？

<ol>
    <li>some data</li>
    <li>more data</li>
    <li>some more data</li>
    <li>even more data</li>
</ol>

【讨论】：

这将是一个使用 PHP 创建的 MYSQL 表。
啊，那我会采用 kisp 的方法。如果这不起作用，要么在 PHP 中生成编号，要么在客户端使用 JS。

【解决方案4】：

基于 kisp 的 CSS 编号方法，我创建了 a prototype，它看起来几乎可以满足您的需求。编号不在单独的列中，而是在“之前”伪元素中。

【讨论】：