Comment obtenir Automatique de Série numéro de la colonne dans la Table HTML

J'ai besoin d'obtenir le numéro de série automatiquement dans ma colonne de la table.

Voici mon exemple de code:

<%@ include file="/WEB-INF/pages/common/taglibs.jspf"%>
<link  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>

Qu'avez-vous essayez de faire cela? Où exactement est votre problème/ erreur?
besoin pour obtenir le numéro de série de la colonne automatiquement dans mon tableau html

InformationsquelleAutor Yellow Flash | 2013-09-25

Pur CSS Solution

voir que Travail Violon

HTML: (un simple tableau avec un vide td qui va contenir le compteur)

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

si vous souhaitez cibler une table, il suffit de donner une classe, et de cibler ceux trs en particulier.

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

Merci! il fonctionne tellement bien
Comment faire pour réinitialiser le compteur pour chaque table si la page web ont plus d'une ligne. C'est le compteur countinue à partir de numéro de série de la dernière ligne du tableau précédent à la 1ère ligne de la table d'à côté . Si le tableau 1 se termine avec un numéro de série n ° 10 , puis le tableau 2 commence à partir de 11. Mais je veux que le tableau 2 pour démarrer à partir de 1.
réinitialiser le compteur pour chaque première ligne. comme ceci
Œuvres! Merci. @avrahamcool PRENDRE JUSQU'MON VOTE :p
Merci pour l'aide! Je me demandais ce que si je veux faire cette Série d'index que pour l'une de mes tables, qu'est ce que je dis dans mon <tr > tag? c'est à dire comment traduire la déclaration css "tr td:first-child:avant" dans la déclaration de style dans le <tr> tag?
J'ai mis à jour la réponse pour vous.

InformationsquelleAutor avrahamcool

5

Laisser la première colonne vide et l'appeler une méthode javascript pour ajouter des numéros de série. Un exemple est montré ci-dessous
```
var addSerialNumber = function () {
$('table tr').each(function(index) {
$(this).find('td:nth-child(1)').html(index+1);
});
};
addSerialNumber();
```
http://jsfiddle.net/ChaitanyaMunipalle/DgUG2/
- pouvez-vous nous dire comment appeler la fonction à l'intérieur de mon javascript modèle.il ne fonctionne pas après avoir coller votre code dans mon javascript modèle
- Dans votre code, ajouter le javascript depuis que jsfiddle et les copier dans votre fichier après le $("#onglets").les onglets();
- <script type="text/javascript"> $(function() { $("#onglets").les onglets(); var addSerialNumber = function () { var i = 1 $('table tr').each(function(index) { $(this).find('td:nth-child(1)').html(index+1); }); }; addSerialNumber(); }); </script>
- (Ne fonctionne pas)....Est mon code javascript à droite comme vous l'avez dit??
InformationsquelleAutor Chaitanya Munipalle

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

essayer ce code jsp.

dans Sql Essayer cette

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

je ne devrais pas changer quoi que ce soit à partir de SQL code bro!!!
Ensuite, essayez le code jsp ou jquery code bro!!
bro!!! il peut être fait à l'aide de Pur CSS.
bro!!! c'était bon,merci de vérifier une fois dans IE 9 à IE 10,navigateurs safari

InformationsquelleAutor Raj Mohan

Dans le cas où si vous avez un en-tête dans votre htmp page.... utilisez le code suivant

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

InformationsquelleAutor romil gaurav

Utiliser le code suivant :- Lire les commentaires pour mieux comprendre

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

InformationsquelleAutor Amarjeet Singh

Vous devez vous connecter pour publier un commentaire.