Сортировка таблиц Javascript

Question

Я сортирую таблицу, когда пользователь нажимает на заголовок таблицы, и я использую ванильный Javascript для этого.Я пытаюсь захватить номер столбца, щелкнув заголовок таблицы и передав его в функцию sortTable (n).Также я пытаюсь запустить функцию sortTable (n) после захвата данных столбца.Я не уверен, где моя ошибка?

document.getElementById('myTable2').addEventListener('click', function() {
  myFunction(event)
}, true);

function myFunction() {
  var col = window.event.target.cellIndex;
  var n = col;
  sortTable(n);
  return n;

}

function sortTable(n) {
  var n = myFunction();
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  
  dir = "asc";
  while (switching) {
   switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the two rows should switch place,
      based on the direction, asc or desc: */
      if (dir === "asc") {
        if (x.textContenttextContent.toLowerCase() > y.textContent.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir === "desc") {
        if (x.textContent.toLowerCase() < y.textContent.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Each time a switch is done, increase this count by 1:
      switchcount++;
    } else {
       if (switchcount === 0 && dir === "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Answer 1

Уф.В том, как вы называли eventHandler "myFunction ()", было довольно много проблем с кодированием.Были также некоторые очень опасные привычки, с которыми вы сталкивались в отношении переменной области.Я переписал их.С другой стороны, логика вашего приложения была разумной.Хорошая работа! Я написал ручку, которая показывает вам ее в действии, если фрагмент не .Но следуйте моему совету по изменению имен переменных, особенно если это для назначения.

document.getElementById('myTable2').addEventListener('click', myFunction, true);

function myFunction(event) {
  // window.alert("In myFunction");
  // console.log(event);
  
  var col = event.target.cellIndex;
  //Following line was redundant;
  //var n = col;
  sortTable(col);
  return col;

}


//PIECE OF ADVICE: If you renamed the variable "n" to "selectedCol", it would be more readable. Or at least "col"
function sortTable(n) {
  // WHY are you redeclaring the argument?
  // And why are you assigning myFunction, which called this function, as the object which you are assigning to n?
//   var n = myFunction();

  // OLD VERSION: All declared and set to 0, then later reassigned: Confusing and can get you into problems with variable scope, and unused declarations. 
  // var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  var switchcount = 0;
  
  var table = document.getElementById("myTable2");
  var switching = true;
  var dir = "asc";

  while (switching) {
   switching = false;
   var rows = table.rows;
    var shouldSwitch;

    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (var i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      var x = rows[i].getElementsByTagName("TD")[n];
      var y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the two rows should switch place,
      based on the direction, asc or desc: */
      if (dir === "asc") {
        if (x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir === "desc") {
        if (x.textContent.toLowerCase() < y.textContent.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Each time a switch is done, increase this count by 1:
      switchcount++;
    } else {
       if (switchcount === 0 && dir === "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
}

<table id = "myTable2" style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>