如何在特定列中显示 HTML table 中的行号？

Question

我在 HTML 中有一个 table，它有 5 列。第一列是 "row number"，我想在其中显示它是哪一行——从 1 开始。

Here's a picture

我试过使用这个 CSS:

body {
    /* Set the Serial counter to 0 */
    counter-reset: Serial; 
}

table {
    border-collapse: separate;
}

tr td:first-child:before {
    /* Increment the Serial counter */
    counter-increment: Serial;

    /* Display the counter */
    content: "Serial is: " counter(Serial); 
}

Answer 1

如果没有你如何做的代码，很难说。我假设这些行在一个集合中，因为你有一个附加功能。不能只用索引+1吗？

如果添加函数只是添加原始 html，您可以获取 table 元素并计算子元素（或使用最后一个子元素）并从中计算您的数量。

根据你提供的信息，我只能说这些了。

Answer 2

这是工作代码：

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            var index = document.getElementById("myTable").rows.length;
            var new_row = '<td>'+index+'</td><td>cell 1</td><td>cell 2</td>';
            document.getElementById("myTable").insertRow(-1).innerHTML = new_row;
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
            `   <td>0</td>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>

        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

Answer 3

您可以再次使用通过 css 的下一个选项：注：class="css-serial"

<table class="css-serial">
  <thead>
    <tr>
      <th>#</th>
      <th>1st Column</th>
      <th>2nd Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
  </tbody>
</table>

并添加下一个样式：

 <style>
/*adding row numbers through css*/
.css-serial {
    counter-reset: serial-number; /* Set the serial number counter to 0 */
}

    .css-serial td:first-child:before {
        counter-increment: serial-number; /* Increment the serial number counter */
        content: counter(serial-number); /* Display the counter */
    }

</style>

如何在特定列中显示 HTML table 中的行号？

How to display row number in HTML table in specific column?

javascript

html

row

row-number