Question

我已经尝试了以下代码，但从给定示例中可以看出它对偶数列不起作用。我无法确定问题所在。请帮我做一些必要的更正。我只是一个热心的学习者。

CSS：

.foo{visibility:hidden};
.faa{visibility:hidden};
.fii{visibility:hidden};

JavaScript：

var toggle = function (action) {
    var trs = document.getElementById('bar').getElementsByTagName('tr'),
        trs_count = trs.length,
        needed = [],
        total = 0,
        pattern = /faa|foo|fii\b/g,
        initial= 'show';

    for (i=0; i<trs_count; i++) {
        var tds = trs[i].getElementsByTagName('td'),
            tds_count = tds.length;
        for (j=0; j<tds_count; j++) {
            if (pattern.exec(tds[j].className)) {
                needed.push(tds[j]);
                total++;
            }
        }
    }

    toggle = function (action) {
        if (this.display == null) {
            this.display = initial;
        }
        if (action == null) {
            this.display = (this.display == 'hide') ? 'show' : 'hide';
        }
        else {
            this.display = action;
        }
        for (i=0; i<total; i++) {
            if (this.display == 'show') {
                needed[i].style.visibility = 'hidden';//changed from display = 'block';
            }
            else {
                needed[i].style.visibility = 'visible';//changed from display = 'none';
            }
        }
        return true;
    }
    return toggle();
}

HTML：

<DIV ALIGN="center" style="display:none">
<!-- used the following patterns. but of no use
/f(\w)\1/g, //f(\w)\1/g,  /\bfoo\b/g, /faa|foo|fii\b/g, -->
</DIV>

<TABLE id="bar" class="reg" ALIGN="CENTER" BORDER=1 CELLSPACING=0 CELLPADDING=0 WIDTH="90%">
    <TR ALIGN="left" VALIGN="middle">
        <TD width="20%"> URL of Site</TD>
        <TD width="20%">User I
        <span onclick="toggle()">D</span> // the event handler
        /Nickname</TD>
        <TD ALIGN="left" width="10%" align="center" nowrap>xxx</TD>
        <TD width="30%">Clue</TD>
        <TD width="20%">Other Information</TD>
    </TR>
    <TR ALIGN="left" VALIGN="middle">
        <TD>xxxxxxxxxxxxx</TD>
        <TD>xxxxxxxxxxxxx</TD>
        <td class="foo">xxxxxxxxx</td>
        <TD class="faa">xxxxxxxxx</TD>
        <TD class="fii">xxxxxxxxxx</TD>
    </TR>
    <TR ALIGN="left" VALIGN="middle">
        <TD>xxxxxxxxxxxxx</TD>
        <TD>xxxxxxxxxxxxx</TD>
        <td class="foo">xxxxxxxxx</td>
        <TD class="faa">xxxxxxxxx</TD>
        <TD class="fii">xxxxxxxxxx</TD>
    </TR>
    <TR ALIGN="left" VALIGN="middle">
        <TD>xxxxxxxxxxxxx</TD>
        <TD>xxxxxxxxxxxxx</TD>
        <td class="foo">xxxxxxxxx</td>
        <TD class="faa">xxxxxxxxx</TD>
        <TD class="fii">xxxxxxxxxx</TD>
    </TR>
</TABLE>

演示：Fiddle

Answer 1

试试这个。

.foo, .faa, .fii {visibility:hidden}

这是Jsfiddle Demo

Answer 2

每次exec（或test（您可能想要使用它）找到匹配项时，它会在正则表达式对象上提升lastIndex属性，然后进行下一次匹配尝试将从字符串上的那个位置开始。因此，当您匹配“foo”时，下一次搜索将从“faa”的索引3开始（因此您将匹配空字符串）。

只有当你的正则表达式对象使用全局标志“g”时才会发生这种情况，所以这里最简单的解决方案就是删除那个标志（因为你没有在同一个类名中寻找多个匹配）：

// ...
pattern = /(faa|foo|fii)\b/,
// ...

另外，你应该像Laughing已经指出的那样修复你的CSS规则。分号应该在花括号内：

.foo{visibility:hidden;}
.faa{visibility:hidden;}
.fii{visibility:hidden;}

切换（显示/隐藏）表格的选定奇数和偶数列

2 个答案: