How to sort table by checkbox checked attribute

Question

I'm new to javascript, and I've got a problem I can't solve for some time... I need to sort table on the fly. The (borrowed) code is:

function sortTable(n) {
      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.getElementsByTagName("TR");
        for (i = 1; i < (rows.length - 1); i++) {
          shouldSwitch = false;
          x = rows[i].getElementsByTagName("TD")[n];
          y = rows[i + 1].getElementsByTagName("TD")[n];

          if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
              shouldSwitch= true;
              break;
            }
          } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
              shouldSwitch= true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          switchcount ++; 
        } else {
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
    }

It works fine with text/numeral values, but the problem is that one of the columns in the table consists of checkboxes. And idea is to sort the table the way rows with checked checkboxes are on top (/bottom, depending on ascending/descending direction).

I tried to check for x.innerHTML.checked==true, but x.innerHTML.checked returns "undefined" so there's no use from this.

Any advice please?

Possible duplicate of [Get the value of checked checkbox?](http://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox) — isherwood, Apr 03 '17 at 18:32

Nico · Answer 1 · 2017-04-03T19:19:13.697

With pure native javascript your for loop should look something like this :

for (i = 1; i < (rows.length - 1); i++) {
    shouldSwitch = false;
    x = rows[i].getElementsByTagName("TD")[n];
    y = rows[i + 1].getElementsByTagName("TD")[n];

    if (dir == "asc") {
        if(x.querySelector("input[type=checkbox]") !== null) { // checkbox case
            shouldSwitch = (x.querySelector("input[type=checkbox]").checked > y.querySelector("input[type=checkbox]").checked);
        } else {
            shouldSwitch= x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase();
        }

    } else if (dir == "desc") {
        if(x.querySelector("input[type=checkbox]") !== null) {
            shouldSwitch = (x.querySelector("input[type=checkbox]").checked < y.querySelector("input[type=checkbox]").checked);
        } else {
            shouldSwitch= x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase();
        }

    }
    if (shouldSwitch) {
        break;
    }
}

With x.querySelector("input[type=checkbox]") you're looking for a checkbox in the TD element you've selected before and that you have put in the variable x.

x is a node object, an element of the DOM of your webpage.

querySelector returns a node object instead of innerHTML that returns simple text. In simple text you can't easily verify your checkbox is checked.

Glad to see it helps, you can mark this answer as the correct answer if you consider it is. — Nico, Apr 05 '17 at 09:47

score 1 · Answer 2 · answered Apr 03 '17 at 18:38

1

If x is the checkbox type DOM element, then just do x.checked in order to access the boolean value of the checkbox.

For example:

document.getElementById('mycheckbox').checked;
// will return true or false

<input id="mycheckbox" type="checkbox">

answered Apr 03 '17 at 18:38

Nathaniel Kitzke

11
1

How to sort table by checkbox checked attribute

2 Answers2