CODEWITHSUNDEEP
javascripthtmlrowrow-number
user6738792
user6738792

Reputation: 71

How to display row number in HTML table in specific column?

I have a table in HTML that has 5 columns. The first column is the "row number", where I want to show which row it is--starting from 1.

Here's a picture

I have tried using this CSS:

body {
    /* Set the Serial counter to 0 */
    counter-reset: Serial; 
}

table {
    border-collapse: separate;
}

tr td:first-child:before {
    /* Increment the Serial counter */
    counter-increment: Serial;

    /* Display the counter */
    content: "Serial is: " counter(Serial); 
}

Upvotes: 4

Views: 15550

Answers (3)

Kiril Dobrev
Kiril Dobrev

Reputation: 851

You can use next option which is through css again: Note: class="css-serial"

<table class="css-serial">
  <thead>
    <tr>
      <th>#</th>
      <th>1st Column</th>
      <th>2nd Column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
    <tr>
      <td></td>           <!--intentionally left blank-->
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
  </tbody>
</table>

And add next style:

 <style>
/*adding row numbers through css*/
.css-serial {
    counter-reset: serial-number; /* Set the serial number counter to 0 */
}

    .css-serial td:first-child:before {
        counter-increment: serial-number; /* Increment the serial number counter */
        content: counter(serial-number); /* Display the counter */
    }

</style>

Upvotes: 9

Parveen Sachdeva
Parveen Sachdeva

Reputation: 1019

Here is the working code for this:

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            var index = document.getElementById("myTable").rows.length;
            var new_row = '<td>'+index+'</td><td>cell 1</td><td>cell 2</td>';
            document.getElementById("myTable").insertRow(-1).innerHTML = new_row;
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
            `   <td>0</td>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>

        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

Upvotes: 1

Devvox93
Devvox93

Reputation: 316

Without the code of how you're doing it it's hard to say. I'm assuming the rows are in a collection, since you have an add-function. Can't you just use the index + 1?

If the add functions just adds the raw html, you can get the table element and count the children (or use the last child) and calculate your number from that.

With the little info you gave that's all I can say.

Upvotes: 0

Related Questions