jQuery 如何在 HTML 表中获取自动序列号列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18998526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Automatic Serial number column in the HTML Table
提问by Yellow Flash
I need to get serial number automatically in one of my column in the table.
我需要在表格中的一列中自动获取序列号。
Here is my sample code:
这是我的示例代码：
<%@ 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>
回答by avrahamcool
Pure CSS Solution
纯 CSS 解决方案
see that Working Fiddle
看到工作小提琴
HTML:(a simple table with a blank tdthat will hold the counter)
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:
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 */
}
if you want to target specific table, just give it a class, and target those trs specifically.
如果你想针对特定的表，只需给它一个类，并tr专门针对那些s。
html
html
<table class="auto-index">
.
.
.
css
css
.auto-index td:first-child:before
{
counter-increment: Serial; /* Increment the Serial counter */
content: "Serial is: " counter(Serial); /* Display the counter */
}
回答by Chaitanya Munipalle
Leave the first column as blank and call a javascript method to add serial numbers. An example is shown below
将第一列留空并调用 javascript 方法添加序列号。一个例子如下所示
var addSerialNumber = function () {
$('table tr').each(function(index) {
$(this).find('td:nth-child(1)').html(index+1);
});
};
addSerialNumber();
回答by Raj Mohan
<%! 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>
try this jsp code.
试试这个jsp代码。
in Sql Try this
在 Sql 中试试这个
SELECT @a:=@a+1 serial_number,marks,(need fields in you db) FROM
student_marks(your db name),(SELECT @a:= 0) AS a;
回答by romil gaurav
In case if you have a header in your htmp page.... use the following code
如果您的 htmp 页面中有标题.... 使用以下代码
var addSerialNumber = function () {
var i = 0
$('table tr').each(function(index) {
$(this).find('td:nth-child(1)').html(index-1+1);
});
};
addSerialNumber();
回答by Amarjeet Singh
Use the following code :- Read the comments for better understanding
使用以下代码：-阅读注释以更好地理解
<% 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>
