堆栈内存溢出
  繁体   English   中英

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

[英]How to get Automatic Serial number column in the HTML Table

 原文  2013-09-25 07:14:37  7   6    javascript/ jquery/ html/ css/ jsp

问题描述

我需要在表格中的一列中自动获取序列号。

这是我的示例代码：

<%@ include file="/WEB-INF/pages/common/taglibs.jspf"%>
<link rel="stylesheet" href="<c:url value='/styles/tablesort.css'/>" />
<script type="text/javascript"
    src="<c:url value='/scripts/jquery.tablesort.js'/>"></script>

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
</script>

<style type="text/css">
table tr td{
text-align:center;
}
</style>


<body>
<div id="tabs" style="width: 880px;">
  <c:if test="${ model != null}">

                <table id="commentsTable" class="tablesorter">
                    <thead>
                        <tr>
                        <th>S.NO<th/>
                        <th><spring:message code="title" /></th>
                        <th><spring:message code="CommentsValue" /></th>
                        <th><spring:message code="By" /></th>
                        <th><spring:message code="date" /></th> 
                        <th><spring:message code="comments" /></th>
                        <th><spring:message code="By" /></th>
                        <th><spring:message code="LateUser" /></th>
                        <th><spring:message code="LateTimestamp" /></th>
                        </tr>
                    </thead>

                    <tbody>
                        <c:forEach var="row" items="${model}">
                        <tr>
                        <td>Need to get automatic serial numbers value here<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>
                    </table>
                    </c:if>
        </div>
</body>

6 个解决方案

解决方案1
 24 已采纳  2013-09-25 09:41:47

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

解决方案2
 5  2013-09-25 07:22:03

将第一列保留为空白并调用javascript方法添加序列号。 一个例子如下所示 

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

addSerialNumber();

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

解决方案3
 3  2013-09-25 07:28:42

    <%! 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;

解决方案4
 0  2016-06-22 13:23:26

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

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

addSerialNumber();

解决方案5
 0  2017-01-18 16:46:36

使用以下代码： - 阅读注释以便更好地理解 

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

解决方案6
 0  2022-08-14 09:42:04

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

万一有人遇到我需要更新表和需要索引的问题，比如电子商务网站中的添加到购物车，那么我们可以使用它。 我在表上使用了名为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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用javascript或jquery获取自动序列号 如何在HTML表格排序中保持序列号不变 如何在Angular表分页中获取增量序列号 如何在GridView中创建自动生成的序列号列 Vue Js：如何在Vue数据表组件中添加序列号列 如何使用 jquery 为表格中的序列号列提供连续编号 如何获取 html 表的第一列值 使用 EJS 循环的自动序列号生成器 如何在特定列的HTML表中显示行号？ 如何为我的HTML表中的每一列查找特定条目的编号？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM