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.
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);
}
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>
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>
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.
var rows = document.getElementById(myTable).getElementsByTagName("tr").length;