In this article we will learn about some of the frequently asked HTML programming questions in technical like “html table auto counter for th” Code Answer. When creating scripts and web applications, error handling is an important part. If your code lacks error checking code, your program may look very unprofessional and you may be open to security risks. Error or stack handling on html was simple and easy. An error message with filename, line number and a message describing the error is sent to the browser. This tutorial contains some of the most common error checking methods in HTML. Below are some solution about “html table auto counter for th” Code Answer.
html table auto counter for th
xxxxxxxxxx
1
// Automatic Serial Number Row in HTML Table
2
<table class="css-serial">
3
<thead>
4
<tr>
5
<th>#</th>
6
<th>1st Column</th>
7
<th>2nd Column</th>
8
</tr>
9
</thead>
10
<tbody>
11
<tr>
12
<!--intentionally left blank-->
13
<td></td>
14
<td>Column 1</td>
15
<td>Column 2</td>
16
</tr>
17
<tr>
18
<!--intentionally left blank-->
19
<td></td>
20
<td>Column 1</td>
21
<td>Column 2</td>
22
</tr>
23
<tr>
24
<!--intentionally left blank-->
25
<td></td>
26
<td>Column 1</td>
27
<td>Column 2</td>
28
</tr>
29
</tbody>
30
</table>
31
32
// The CSS
33
.css-serial {
34
counter-reset: serial-number; /* Set the serial number counter to 0 */
35
}
36
37
.css-serial td:first-child:before {
38
counter-increment: serial-number; /* Increment the serial number counter */
39
content: counter(serial-number); /* Display the counter */
40
}
41
//-----------------------------
42
// Or using JQ
43
function addRowCount(tableAttr) {
44
$(tableAttr).each(function(){
45
$('th:first-child, thead td:first-child', this).each(function(){
46
var tag = $(this).prop('tagName');
47
$(this).before('<'+tag+'>#</'+tag+'>');
48
});
49
$('td:first-child', this).each(function(i){
50
$(this).before('<td>'+(i+1)+'</td>');
51
});
52
});
53
}
54
55
// Call the function with table attr on which you want automatic serial number
56
addRowCount('.js-serial');
57
//----------------------------------------------
58
// Or using Js
59
60
var table = document.getElementsByTagName('table')[0],
61
rows = table.getElementsByTagName('tr'),
62
text = 'textContent' in document ? 'textContent' : 'innerText';
63
64
for (var i = 0, len = rows.length; i < len; i++) {
65
rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
66
}
67
68
//=======================================
69
// src: https://mariusmateoc.com/blog/automatic-serial-number-row-in-html-table/
70
// src: https://stackoverflow.com/questions/17012421/auto-number-table-rows
71
