Spaces:
Running
Running
Commit
·
6455697
1
Parent(s):
f372a24
add
Browse files- index.html +61 -93
index.html
CHANGED
@@ -224,13 +224,14 @@ tr:hover a {
|
|
224 |
|
225 |
function createTable(data, tableId) {
|
226 |
let table = `<table id="${tableId}"><thead><tr>`;
|
227 |
-
|
228 |
-
|
229 |
-
|
|
|
230 |
|
231 |
-
Object.keys(data[0]).forEach((key, index) => {
|
232 |
-
|
233 |
-
});
|
234 |
|
235 |
table += '</tr></thead><tbody>';
|
236 |
data.forEach(row => {
|
@@ -251,105 +252,72 @@ tr:hover a {
|
|
251 |
}
|
252 |
|
253 |
function sortTable(tableId, n) {
|
254 |
-
|
255 |
-
|
256 |
-
|
257 |
-
|
258 |
|
259 |
-
|
260 |
-
headers.
|
261 |
-
|
262 |
-
|
263 |
-
}
|
264 |
-
});
|
265 |
|
266 |
-
|
267 |
-
|
268 |
-
arrowSpan.textContent = dir === "asc" ? " ▲" : " ▼";
|
269 |
|
270 |
-
while (switching) {
|
271 |
-
switching = false;
|
272 |
-
const rows = table.rows;
|
273 |
-
for (let i = 1; i < rows.length - 1; i++) {
|
274 |
-
let shouldSwitch = false;
|
275 |
-
let x = rows[i].cells[n].innerHTML;
|
276 |
-
let y = rows[i + 1].cells[n].innerHTML;
|
277 |
|
278 |
-
// 判断是否为数字
|
279 |
-
let xVal = isNaN(parseFloat(x)) ? x : parseFloat(x);
|
280 |
-
let yVal = isNaN(parseFloat(y)) ? y : parseFloat(y);
|
281 |
|
282 |
-
|
283 |
-
|
284 |
-
|
285 |
-
|
286 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
287 |
}
|
288 |
-
|
289 |
-
|
290 |
-
|
|
|
|
|
|
|
|
|
|
|
291 |
switching = true;
|
292 |
-
switchcount++;
|
293 |
}
|
294 |
}
|
|
|
295 |
|
296 |
-
|
297 |
-
|
298 |
-
|
299 |
-
|
300 |
}
|
301 |
}
|
302 |
-
|
303 |
-
|
304 |
-
// var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
|
305 |
-
// table = document.getElementById(tableId);
|
306 |
-
// switching = true;
|
307 |
-
// dir = "asc";
|
308 |
-
// while (switching) {
|
309 |
-
// switching = false;
|
310 |
-
// rows = table.rows;
|
311 |
-
// for (i = 1; i < (rows.length - 1); i++) {
|
312 |
-
// shouldSwitch = false;
|
313 |
-
// x = rows[i].getElementsByTagName("TD")[n];
|
314 |
-
// y = rows[i + 1].getElementsByTagName("TD")[n];
|
315 |
-
// if (dir == "asc") {
|
316 |
-
// if (isNaN(x.innerHTML)) {
|
317 |
-
// if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
318 |
-
// shouldSwitch = true;
|
319 |
-
// break;
|
320 |
-
// }
|
321 |
-
// } else {
|
322 |
-
// if (Number(x.innerHTML) > Number(y.innerHTML)) {
|
323 |
-
// shouldSwitch = true;
|
324 |
-
// break;
|
325 |
-
// }
|
326 |
-
// }
|
327 |
-
// } else if (dir == "desc") {
|
328 |
-
// if (isNaN(x.innerHTML)) {
|
329 |
-
// if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
330 |
-
// shouldSwitch = true;
|
331 |
-
// break;
|
332 |
-
// }
|
333 |
-
// } else {
|
334 |
-
// if (Number(x.innerHTML) < Number(y.innerHTML)) {
|
335 |
-
// shouldSwitch = true;
|
336 |
-
// break;
|
337 |
-
// }
|
338 |
-
// }
|
339 |
-
// }
|
340 |
-
// }
|
341 |
-
// if (shouldSwitch) {
|
342 |
-
// rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
343 |
-
// switching = true;
|
344 |
-
// switchcount++;
|
345 |
-
// } else {
|
346 |
-
// if (switchcount == 0 && dir == "asc") {
|
347 |
-
// dir = "desc";
|
348 |
-
// switching = true;
|
349 |
-
// }
|
350 |
-
// }
|
351 |
-
// }
|
352 |
-
// }
|
353 |
|
354 |
|
355 |
Object.keys(urls).forEach(key => {
|
|
|
224 |
|
225 |
function createTable(data, tableId) {
|
226 |
let table = `<table id="${tableId}"><thead><tr>`;
|
227 |
+
for (let key in data[0]) {
|
228 |
+
// table += `<th><a href="javascript:void(0);" onclick="sortTable('${tableId}', ${Object.keys(data[0]).indexOf(key)})">${key}</a></th>`;
|
229 |
+
table += `<th><a href="javascript:void(0);" onclick="sortTable('${tableId}', ${Object.keys(data[0]).indexOf(key)})">${key} <span class="sort-arrow"></span></a></th>`;
|
230 |
+
}
|
231 |
|
232 |
+
// Object.keys(data[0]).forEach((key, index) => {
|
233 |
+
// table += `<th data-index="${index}" onclick="sortTable('${tableId}', ${index})">${key} <span class="sort-arrow"></span></th>`;
|
234 |
+
// });
|
235 |
|
236 |
table += '</tr></thead><tbody>';
|
237 |
data.forEach(row => {
|
|
|
252 |
}
|
253 |
|
254 |
function sortTable(tableId, n) {
|
255 |
+
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
|
256 |
+
table = document.getElementById(tableId);
|
257 |
+
switching = true;
|
258 |
+
dir = "asc";
|
259 |
|
260 |
+
let headers = table.getElementsByTagName("th");
|
261 |
+
for (let i = 0; i < headers.length; i++) {
|
262 |
+
headers[i].querySelector(".sort-arrow").innerHTML = "";
|
263 |
+
}
|
|
|
|
|
264 |
|
265 |
+
let currentHeader = headers[n];
|
266 |
+
let arrow = currentHeader.querySelector(".sort-arrow");
|
|
|
267 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
268 |
|
|
|
|
|
|
|
269 |
|
270 |
+
while (switching) {
|
271 |
+
switching = false;
|
272 |
+
rows = table.rows;
|
273 |
+
for (i = 1; i < (rows.length - 1); i++) {
|
274 |
+
shouldSwitch = false;
|
275 |
+
x = rows[i].getElementsByTagName("TD")[n];
|
276 |
+
y = rows[i + 1].getElementsByTagName("TD")[n];
|
277 |
+
if (dir == "asc") {
|
278 |
+
if (isNaN(x.innerHTML)) {
|
279 |
+
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
280 |
+
shouldSwitch = true;
|
281 |
+
break;
|
282 |
+
}
|
283 |
+
} else {
|
284 |
+
if (Number(x.innerHTML) > Number(y.innerHTML)) {
|
285 |
+
shouldSwitch = true;
|
286 |
+
break;
|
287 |
+
}
|
288 |
+
}
|
289 |
+
} else if (dir == "desc") {
|
290 |
+
if (isNaN(x.innerHTML)) {
|
291 |
+
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
292 |
+
shouldSwitch = true;
|
293 |
+
break;
|
294 |
+
}
|
295 |
+
} else {
|
296 |
+
if (Number(x.innerHTML) < Number(y.innerHTML)) {
|
297 |
+
shouldSwitch = true;
|
298 |
+
break;
|
299 |
+
}
|
300 |
+
}
|
301 |
}
|
302 |
+
}
|
303 |
+
if (shouldSwitch) {
|
304 |
+
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
305 |
+
switching = true;
|
306 |
+
switchcount++;
|
307 |
+
} else {
|
308 |
+
if (switchcount == 0 && dir == "asc") {
|
309 |
+
dir = "desc";
|
310 |
switching = true;
|
|
|
311 |
}
|
312 |
}
|
313 |
+
}
|
314 |
|
315 |
+
if (dir == "asc") {
|
316 |
+
arrow.innerHTML = "▲"; // Up arrow
|
317 |
+
} else {
|
318 |
+
arrow.innerHTML = "▼"; // Down arrow
|
319 |
}
|
320 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
321 |
|
322 |
|
323 |
Object.keys(urls).forEach(key => {
|