How to get Automatic Serial number column in the HTML Table

javascript jquery html css jsp

79,081

Solution 1

Pure CSS Solution

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

Solution 2

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();

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

Solution 3

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

79,081

Author by

Yellow Flash

Happy in learning New Technologies My Favorite Quotes are "I won't run away anymore... I won't go back on my word... that is my way!" A genius, huh? What does that mean? 'Genius'? So I was not born with a whole lot of natural talent,... but I work hard and I never give up! That is my gift; that is my way!"

Updated on July 31, 2022

Comments

Yellow Flash almost 2 years

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>

Yellow Flash almost 11 years

can you please say how to call the function inside my javascript template.it is not working after pasting your code in my javascript template
Chaitanya Munipalle almost 11 years

In your code, add the javascript from that jsfiddle and copy in your file after $("#tabs").tabs();
Yellow Flash almost 11 years

<script type="text/javascript"> $(function() { $("#tabs").tabs(); var addSerialNumber = function () { var i = 1 $('table tr').each(function(index) { $(this).find('td:nth-child(1)').html(index+1); }); }; addSerialNumber(); }); </script>
Ever Think almost 10 years

@avrahamcool ... How to reset the counter for each table if the webpage have more than one row. That is the counter countinue from serial no of last row of the previous table to the 1st row of the next table . That is if table 1 ends with serial no 10 , then table 2 starts from 11. But I want the table 2 to start from 1.
avrahamcool almost 10 years

@RageshDAntony reset the counter for each first row. like this
Leo about 6 years

Thank you for the help! I was wondering what if I'd like to apply this Serial index only for one of my tables, what shall I say in my <tr > tag? i.e. how to translate the css statement "tr td:first-child:before" into the style statement in <tr> tag?