Question

我刚读过this question，但答案似乎对我没有帮助。另外，我认为这段代码最初会隐藏表格，但这也无效。这是针对chrome扩展的，因此不需要跨浏览器功能。请纯粹的javascript答案。

    var observer = new MutationObserver(function(mutations) {  

        tables = main_pm_node.getElementsByClassName('featureOptions');
        //alert("outside - number of tables found: " + tables.length);

        if(tables.length > 0){
            observer.disconnect();
            console.log("number of tables found: " + tables.length);
            for(i=0; i<tables.length; i++){
                (function(i) {
                    var sp = document.createElement('span');
                    var act_table = document.createElement('table');
                    act_table.id = 'act-tests-' + i;
                    act_table.style = 'display:none';//'visibility: visible';
                    act_table.innerHTML ='<tbody>blah blah html html</tbody>';
                    sp.appendChild(act_table);

                    tables[i].parentElement.appendChild(sp);
                    var row   = tables[i].insertRow(-1);
                    var cell = row.insertCell(0);
                    var cell1 = row.insertCell(1);
                    cell1.className = "optionLabel pull-left";

                    var button = document.createElement('button');
                    button.innerHTML = 'Show ACT tests';
                    button.className = 'btn pull-left';
                    button.type = 'button';
                    button.onclick = function(){
                        var lTable = document.getElementById(act_table.id);
                        console.log(act_table.id + ' ' + lTable);
                        lTable.style.display = (lTable.style.display == 'block') ? 'none' : 'block';
                    };

                    cell1.appendChild(button); //.innerHTML = '<input class="btn pull-left" type="button" onclick="toggleTable();" value="Show ACT tests"/>' ;
                })(i);
            }
        }
    });

Answer 1

两个错误：

act_table.style = 'display:none'不会隐藏元素，您应使用act_table.style.display = "none"代替
既然act_table没有被隐藏，lTable.style.display将是空字符串，而不是阻止，因此表格只会在第二次点击后隐藏（第一次点击会设置lTable.style.display = "block"，当再次点击，(lTable.style.display == 'block')将会完成）

为什么我的隐藏/取消隐藏按钮仅在第二次点击时起作用？

1 个答案: