为什么单击相应元素时该功能不起作用？

Question

// 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

function 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。但它仍然不起作用。试试代码，你就会明白我在说什么。那么我怎样才能摆脱这个呢？

Answer 1

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