How to get Automatic Serial number column in the HTML Table
Question
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>
6 answers
solution1
24 ACCPTED 2013-09-25 09:41:47
Pure CSS Solution
see that Working Fiddle
HTML: (a simple table with a blank td that will hold the counter)
<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 */
}
if you want to target specific table, just give it a class, and target those tr s specifically.
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 */
}
solution2
5 2013-09-25 07:22:03
Leave the first column as blank and call a javascript method to add serial numbers. An example is shown below
var addSerialNumber = function () {
$('table tr').each(function(index) {
$(this).find('td:nth-child(1)').html(index+1);
});
};
addSerialNumber();
solution3
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>
try this jsp code.
in Sql Try this
SELECT @a:=@a+1 serial_number,marks,(need fields in you db) FROM
student_marks(your db name),(SELECT @a:= 0) AS a;
solution4
0 2016-06-22 13:23:26
In case if you have a header in your htmp page.... use the following code
var addSerialNumber = function () {
var i = 0
$('table tr').each(function(index) {
$(this).find('td:nth-child(1)').html(index-1+1);
});
};
addSerialNumber();
solution5
0 2017-01-18 16:46:36
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>
solution6
0 2022-08-14 09:42:04
I know the correct answer has already been given, but I had same question but my table rows will be appended dynamically so, the answer wasn't helpful to me.
Incase anyone ever run into my type of problem where you need to update table and need index, like add-to-cart in e-commerce sites then we can use this. I used the DOM property called childElementCount on the table which returns the number of child elements of an element.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.