This repository has been archived by the owner on Oct 1, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
table.html
99 lines (86 loc) · 1.99 KB
/
table.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<table id="mytable1" style="width:100%">
<tbody>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th data-sort-default>Age</th>
</tr>
</thead>
<tr>
<td>Jill</td>
<td>Smith</td>
<td class="age">50</td>
</tr>
<tr>
<td>kula</td>
<td>bula</td>
<td class="age">20</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td class="age">80</td>
</tr>
</tbody>
</table>
<table id="mytable2" style="width:100%">
<tbody>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td>Jill</td>
<td>Smith</td>
<td age="true">50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td age="true">94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td age="true">80</td>
</tr>
</tbody>
</table>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.0.0/tablesort.min.js'
></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.0.0/src/sorts/tablesort.number.js'
></script>
<script>
//querySelectorAll('table tr')
//document.querySelectorAll("table tr").forEach((el) => {
//if (parseInt(el.cells[2].innerText, 10) >= 52)
//el.style.color = 'red';
//})
var sort = new Tablesort(document.getElementById('mytable1'), { descending: true });
// Make some Ajax request to fetch new data and on success:
sort.refresh();
var cells = document.querySelectorAll("#mytable1 > tbody > tr").forEach((el) => {if (parseInt(el.cells[2].innerText, 10) >= 30) el.style.color = 'blue'});
</script>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>