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 => {
|