// PART 1 -- CREATING THE TABLE USING ARRAYlet 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 OPTIONfunction sortByCategory(n){ n = n.selectedIndex; /* value of n must be 1 in this case */ // console.log(n); let isString = typeof table_elements[0][n-1]; // console.log(isString); var sortingOrder = document.getElementById("sortingOrder").value; if(isString == "string") { if(sortingOrder == "Ascending") table_elements.sort(); else table_elements.sort().reverse(); } else { if(sortingOrder == "Ascending"){ table_elements.sort(function (a, b) { return a[n-1] - b[n-1]; }); } else{ table_elements.sort(function (a, b) { return b[n - 1] - a[n - 1]; }); } } 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]; } }在此代码中一切正常，但我需要将表格元素排序为升序或降序。因此，当我选择升序或降序时，它应该根据事件进行排序。但我需要再次点击按类别排序选项，然后它才起作用。当我选择升序或降序时，我尝试运行函数 sortbycategory。但它仍然不起作用。试试代码，你就会明白我在说什么。那么我怎样才能摆脱这个呢？
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>
添加回答
举报
0/150
提交
取消