0

Earlier today I adapted code from a w3schools example to filter my table columns by clicking the header. This is it, pulled straight from the site:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  // Set the sorting direction to ascending:
  dir = "asc";
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    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.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      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 no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Clicking each header runs the function for their column only with onclick="sortTable(0)" starting from the left and increasing the number by 1 for each column.

I also started using their example for searching the columns, however I needed it to work per column. I liked it better than some other things I tried like DataTables, and it was simple code, so I used it. Comparing it to the code I used earlier I made some changes:

function searchFunction(n) {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("search");
        filter = input.value.toUpperCase();
        table = document.getElementById("table");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[n];
                if (td) {
                        txtValue = td.textContent || td.innerText;
                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
                                tr[i].style.display = "";
                        } else {
                                tr[i].style.display = "none";
                        }
                }
        }
}

I knew that changing the number for td = tr[i].getElementsByTagName("td")[n] would pick the column, so I did the same thing for this script as the other. My search input has onkeyup="searchFunction(0) and ascends for each column. The search still only runs for column 0 like it runs in w3schools example with function searchFunction()" and td = tr[i].getElementsByTagName("td")[0]. What is the difference between these two that I'm not seeing. I am fairly new to JS and I don't know what the value in the parenthesis after your function or the brackets after the DOM element are called even, I have only seen them work.

ZenRen
  • 33
  • 1
  • 8
  • "what the value in the parenthesis after your function" - depending context, it's either an argument (when the function is being called) or a parameter (when the function is being defined) (see [this question](https://stackoverflow.com/questions/156767/whats-the-difference-between-an-argument-and-a-parameter)). As for why your function doesn't seem to work, it would be useful to see how you've added the function to your table. – Tieson T. Sep 24 '19 at 22:34
  • @TiesonT. I'm no longer at work, so I can't get you the whole code but I believe its just `` in the footer the number in the parenthesis increases with each column. As I said, it is very similar to how I did the headers for sorting, which work, but searching only works on column 0. Also, there are no errors in the console. – ZenRen Sep 24 '19 at 23:03
  • If you're repeating something with an `id="search"` in every row, that's going to cause issues, since IDs are supposed to be unique; `getElementById` will only match the first element with that ID. You may find this MDN article useful: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById – Tieson T. Sep 25 '19 at 01:47
  • That is probably it. Is this really a necessary part of the code? It seems to be just apart of the case insensitivity, but I do want that. How can I do without the id tag or make them all unique without writing a script for each one? – ZenRen Sep 25 '19 at 02:37
  • You could probably just pass `this` instead of an index (so, `searchFunction(this)`) and use that to "dereference" the textbox that triggered the function. Something like this: https://jsfiddle.net/8hmadzrf/ – Tieson T. Sep 25 '19 at 06:04

0 Answers0