1 回答

TA貢獻1851條經驗 獲得超5個贊
// PART 1 -- CREATING THE TABLE USING ARRAY
let table_elements = [
["Krishna", 3, 47.3],
["Robert", 2, 47.4],
["Jennifer", 4, 82],
["Dekisugi", 1, 71],
["Muhammad", 5, 68]
];
let getTable = document.getElementsByTagName("table")[0];
window.onload = () => {
getTableData();
}
function getTableData() {
table_elements.forEach((value, index) => {
let tr = document.createElement("tr");
for (let x = 0; x < table_elements[0].length; x++) {
let td = document.createElement("td");
td.innerHTML = table_elements[index][x];
tr.appendChild(td);
}
getTable.appendChild(tr);
});
}
// PART 2 -- SORTING THE VALUES UPON SELECT AN OPTION
var sortingOrder = 'Ascending'
var sn = 0
function sortByCategory(n = null) {
let isString = null
if(n){
n = n.selectedIndex; /* value of n must be 1 in this case */
console.log("value of ",n);
sn = n-1
isString = typeof table_elements[0][n - 1];
// console.log(isString);
}
if (isString == "string") {
if (sortingOrder == "Ascending")
table_elements.sort();
else
table_elements.sort().reverse();
}
else {
if (sortingOrder == "Ascending") {
if (sn === 0) {
table_elements.sort(function(a, b) {
if (a[sn] > b[sn]) {
return 1
} else if (b[sn] > a[sn]) {
return -1
} else {
return 0
}
});
}
else {
table_elements.sort(function(a, b) {
return a[sn] - b[sn];
}); }
}
else {
console.log('descending' ,sn)
if (sn === 0) {
table_elements.sort(function(a, b) {
if (a[sn] > b[sn]) {
return -1
} else if (b[sn] > a[sn]) {
return 1
} else {
return 0
}
});
}
else {
table_elements.sort(function(a, b) {
return b[sn] - a[sn];
});
}
}
}
for (let y = 1; y < table_elements.length + 1; y++) {
let getTR = getTable.getElementsByTagName("tr")[y];
for (let z = 0; z < table_elements[0].length; z++) {
let getTD = getTR.getElementsByTagName("td")[z];
getTD.innerHTML = table_elements[y - 1][z];
}
}
}
function sortTable(order) {
sortingOrder = order.value
sortByCategory()
}
<select onchange="sortByCategory(this)">
<option value="--SORT BY CATEGORY--" selected disabled>--SORT BY CATEGORY--</option>
<option value="Sort by Name">Sort by Name</option>
<option value="Sort by Roll No.">Sort by Roll No.</option>
<option value="Sort by Attendance">Sort by Attendance</option>
</select>
<select id="sortingOrder" onchange="sortTable(this)">
<option value="Ascending">Ascending</option>
<option value="Descending">Descending</option>
</select>
<table>
<tr>
<th>Name</th>
<th>Roll No.</th>
<th>Attendance</th>
</tr>
</table>
添加回答
舉報