0

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

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>

演示：小提琴

4

2 回答 2

0

尝试这个。

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

这是 Jsfiddle演示

于 2013-05-16T03:34:41.550 回答
0

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

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

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

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

.foo{visibility:hidden;}
.faa{visibility:hidden;}
.fii{visibility:hidden;}
于 2013-05-16T14:28:48.010 回答