问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

这是我的示例代码：

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

原文由 Yellow Flash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmlcssjsp
阅读 638
2 个回答
得票最新
社区维基
1
✓ 已被采纳

纯 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 s。

网页格式

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

原文由 avrahamcool 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

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

addSerialNumber();

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

原文由 Chaitanya Munipalle 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题