我需要在表格的一个列中自动获取序列号.
这是我的示例代码：
<%@ 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>
解决方法
纯CSS解决方案
看到那个Working Fiddle
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 */
}
如果你想要定位特定的表,只需给它一个类,并专门针对那些trs.
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 */
}
