Skip to content Skip to sidebar Skip to footer

How To Hide A Row Of A Table Which Does Not Contains A Specific Icon

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 tic

Solution 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'});

Post a Comment for "How To Hide A Row Of A Table Which Does Not Contains A Specific Icon"