如何在 HTML 表中获取自动序列号列

纯CSS解决方案

看到工作小提琴

HTML：（一个简单的表格，带有一个空白td，将容纳计数器）

<table border="1">
    <thead>
        <tr>
            <th>Automatic Serial number</th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <!--leave it blank-->
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td></td>
            <!--leave it blank-->
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td></td>
            <!--leave it blank-->
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td></td>
            <!--leave it blank-->
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td></td>
            <!--leave it blank-->
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td></td>
            <!--leave it blank-->
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td></td>
            <!--leave it blank-->
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td></td>
            <!--leave it blank-->
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

.CSS：

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: "Serial is: " counter(Serial); /* Display the counter */
}

如果要定位特定表，只需为其提供一个类，并专门针对这些tr。

.html

<table class="auto-index">
.
.
.

.css

.auto-index td:first-child:before
{
  counter-increment: Serial;      /* Increment the Serial counter */
  content: "Serial is: " counter(Serial); /* Display the counter */
}

将第一列留空，并调用 javascript 方法来添加序列号。示例如下所示

var addSerialNumber = function () {
    $('table tr').each(function(index) {
        $(this).find('td:nth-child(1)').html(index+1);
    });
};
addSerialNumber();

http://jsfiddle.net/ChaitanyaMunipalle/DgUG2/

    <%! int i = 1; %> 
                    <tbody>
                        <c:forEach var="row" items="${model}">
                        <tr>
                        <td><%= i; %> <%! i++; %> <td>
                        <td>HTML</td>
                        <td style="word-break:break-all;">Mount</td>
                        <td>1234</td>
                        <td>2345</td>
                        <td style="word-break:break-all;">2345</td>
                        <td>token</td>
                        <td>right</td>
                        <td>10982</td>
                        </tr>
                        </c:forEach>
                    </tbody>

试试这个 JSP 代码。

在 Sql 中试试这个

SELECT  @a:=@a+1 serial_number,marks,(need fields in you db) FROM
student_marks(your db name),(SELECT @a:= 0) AS a;

如果你的htmp页面中有标题....使用以下代码

var addSerialNumber = function () {
    var i = 0
    $('table tr').each(function(index) {
        $(this).find('td:nth-child(1)').html(index-1+1);
    });
};
addSerialNumber();

使用以下代码：- 阅读评论以更好地理解

<% int i = 1; %>   //  --> It will declare value of i as 1
    <c:forEach>
    <tr>
            <td><%= i %> <% i++; %></td>  // --> It will display and increment the value
            <td>${product.productDescription}</td>
            <td>${products.warehouseQuantity}</td>
             <td>${product.productPrice }</td>
            <td>Rs ${product.productDiscount }</td>
            <td>Rs ${product.productPricePerQuantity }</td>
    </tr>
        </c:forEach>

已经给出了正确的答案，但我有同样的问题，但我的表格行将动态附加，所以答案对我没有帮助。

如果有人遇到我需要更新表并需要索引的问题类型，例如电子商务站点中的添加到购物车，那么我们可以使用它。我在表上使用了名为childElementCount的DOM属性，该属性返回元素的子元素数。

function func(){
let index = document.getElementsByTagName("table")[0].childElementCount
  $('table').append(`
    <tr class="items--row">
        <td class="ind">${index}</td>
        <td>Chocolate</td>
        <td>$23</td>
        <td>10</td>
        <td>$230</td>
    </tr>
    `);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
                <tr class="head--row">
                    <th>S.no</th>
                    <th>Name</th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Total Price</th>
                </tr>
                
</table>
<button onclick="func()">Sample</button>