How to hide a row of a table which does not contains a specific icon

Question

I have a table with some items and those items can be selected by adding a tick. Check the image attached:

What I need to achieve is to hide the row which does not contain any ticks to be not visible. This is because in my app I have to generate lists of the items contains only ticks in another view. So when I will press the generate button that row will be hidden. I just want to say if that row does not contain any 'glyphicon-ok' need to be deleted/hidden when I will generate the view with the list of those items.

I tried something like this:

SveCrf.prototype.hideRowWhereNoTicksForm = function () {
    var tr = document.getElementsByTagName('tr');

    for (var i = 0; i < tr.length; i++) {
        switch (tr.item(i).getElementsByTagName('td').item(0).className) {
            case "glyphicon-ok":
                tr.item(i).style.display = "none";
                break;
        }
    }
}

This doesn't do anything. I would like to see an example of being able to resolve this issue.

Answer 1

Correct me if I'm wrong but you don't seem to have provided HTML you want to act upon but just a screenshot and a link to some RoR code in the comments that generates the HTML. Also you don't show how you try to execute SveCrf.prototype.hideRowWhereNoTicksForm , and furthermore I'm not really sure at all what you are trying to do with switch/case (I also don't understand what item is supposed to be; this is where providing us with actual HTML might have helped).

In addition, as I've alluded to in some comments of mine, you are really trying to do two things. I don't know if you've seen this Stackoverflow page yet about creating "a Minimal, Complete, and Verifiable example" but I think reviewing that will help improve your StackOverflow experience moving forward (and also for me it validated my suggestion of "divide and conquer").

All of which I think made it hard for you to get the help you desired. In any case below I'm providing some sample HTML with a table containing four rows total, two with a cell that contains the class foo , and two that don't. Beneath that is my non-jQuery code selecting the rows with no cells containing the class foo , and then hiding them; furthermore there is a demo of the same functionality using jQuery at https://repl.it/@dexygen/HideRowsWithNoCellsWithClass

<table border="1">
  <tr><td class='foo'>foo</td><td></td><td></td></tr>
  <tr><td></td><td>bar</td><td></td></tr>
  <tr><td></td><td></td><td>baz</td></tr>
  <tr><td class="foo">foo</td><td>bar</td><td>baz</td></tr>
</table>

/*
We cannot call `filter` directly on an HTMLCollection such as returned by 
"document.getElementsByTagName('tr')" as it is not a bona fide array, so we use 
"[].filter.call()", and we return only those rows that *fail* the test 
"row.querySelector('td.foo')", then we loop over these with `forEach` and hide them
*/

[].filter.call(document.getElementsByTagName('tr'), function(row) {
    return !row.querySelector('td.foo');
}).forEach(function(row) {row.style.display = 'none'});