Cómo get la columna de Número de serie automático en la tabla HTML

Necesito get el número de serie automáticamente en una de las columnas de la tabla.

Aquí está mi código de muestra:

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

Solución Pure CSS

ver ese violín de trabajo

HTML: (una tabla simple con un td blanco que contendrá el contador)

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

Deje la primera columna en blanco y llame a un método de JavaScript para agregar numbers de serie. Un ejemplo se muestra a continuación

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

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

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

testing este código jsp.

en Sql Pruebe esto

 SELECT @a:=@a+1 serial_number,marks,(need fields in you db) FROM student_marks(your db name),(SELECT @a:= 0) AS a; 

En caso de que tenga un encabezado en su página htmp … use el siguiente código

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

Use el siguiente código: – Lea los comentarios para una mejor comprensión

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