如何隐藏不包含特定图标的表的行 [英] 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:

我需要实现的是隐藏不包含任何刻度的行.这是因为在我的应用程序中，我必须生成项目列表，其中仅包含另一个视图中的刻度.因此，当我按下生成"按钮时，该行将被隐藏. 我只想说，当我生成带有这些项目列表的视图时，是否该行不包含任何"glyphicon-ok"是否需要删除/隐藏.

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.

我尝试过这样的事情:

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.

推荐答案

如果我错了，请纠正我，但是您似乎没有提供要操作的HTML，而只是提供了屏幕截图和一些RoR代码的链接在生成HTML的注释中.另外，您也没有展示如何尝试执行SveCrf.prototype.hideRowWhereNoTicksForm，此外，我完全不确定要使用switch/case做什么(我也不知道item应该是什么) ；这是向我们提供实际HTML可能会有所帮助的地方).

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).

此外，正如我在我的一些评论中提到的那样，您实际上是在尝试做两件事.我不知道您是否看到过此Stackoverflow页面，有关创建最小，完整且可验证的示例" ，但我认为进行复习将有助于改善您的StackOverflow前进的经验(对我而言，它也验证了我关于分而治之"的建议).

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").

我认为所有这些都使您难以获得所需的帮助.在下面的任何情况下，我都将为示例HTML提供一个表，该表总共包含四行，其中两行包含一个包含类foo的单元格，另外两行则不包含该行.在我的非jQuery代码下面，选择没有包含类foo的单元格的行，然后将其隐藏；此外，在 https://repl.it/@dexygen/HideRowsWithNoCellsWithClass

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

这篇关于如何隐藏不包含特定图标的表的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！