hide/show table onclick 在 div 中不起作用

Question

我在 div 元素中有一个 table

<div id="E" ng-model="total">
    <div ng-if="total.passfail" onclick="showE1()">{{total.passfail}} scripts Passed in {{Listbox}} and failed in {{Comparebox}}</div>
    <table width="100%" id="E1">                            
        <thead>
            ...lots of trs and tds                                  
        </thead>

        <tbody>
            ...lots of trs and tds
        </tbody>
    </table>  
 </div>

单击文本时，它应该调用 showE1 和 hide/display table。当我调试它时，它进入函数 showE1 onclick 但显示没有改变。我犯了一个菜鸟错误吗？

function showE1(){  
      document.getElementById("E1").style.display = "block" ? "none" : "block";
}

Answer 1

如果 "block" 为真，三元运算符将 return "none"，否则 "block"。因为 "block" 是一个常量并且求值为 truthy

document.getElementById("E1").style.display = "block" ? "none" : "block";

将永远return"none"。你要这样做吗？

document.getElementById("E1").style.display = (document.getElementById("E1").style.display == "block") ? "none" : "block";

Answer 2

您正在执行内联 if 语句，但您的逻辑测试只是 "block"。如果您询问 Javascript "block?"，这不会导致 true/false。您需要测试当前值是否等于 "block".

Answer 3

对我来说，它的工作方式与您相同。

               function showE1()
                {   

                    document.getElementById("E1").style.display = "block" ? "none" : "block";
                }

             <div id="E" ng-model="total">
                <div ng-if="total.passfail" onclick="showE1()">{{total.passfail}} scripts Passed in {{Listbox}} and failed in {{Comparebox}}</div>


                    <table width="100%" id="E1">


                        <thead>
                            <tr><td>Something</td></tr>

                        </thead>

                        <tbody>
                            <tr><td>Something else</td></tr>

                        </tbody>
                    </table>  
 </div>

仔细检查您的测试平台上的代码运行是否确实是您 post 提出的问题。

hide/show table onclick 在 div 中不起作用

hide/show a table onclick not working inside div

html

javascript

getelementbyid