如何單擊按鈕並顯示表格中的列？

Question

最近我正在嘗試制作表格，如果我單擊按鈕，我需要先隱藏答案並顯示答案。 我試圖創建一個 java function。 但是，它不能真正起作用。 我該如何解決？ 謝謝你！！

<html>
<style>
table td.first { display: none; }
</style>
 <p><span class="content_inline_highlight_green_i">For each of the cases below, please indicate whether you think it is appropriate behaviour or not. Click the box that reflects your view. 
       </span>
       <table border=1>
       <tr>
       <td>Behaviors</td>
       <td>Appropriate</td>
       <td>Inappropriate</td>
       <td>Answer</td>
       </tr>
       <tr>
       <td>Is it appropriate?</td>
       <td><input type = "radio" name = "q1"></td> <td><input type = "radio" name = "q1"></td>
       <td class="first">Inappropriate</td>
       </tr>
       </table>
       <input type="button" id="showAll" value="Show Answer" />
       <script>
        var showAll = function () {
            var e = document.getElementsByClassName("first");
            for (var i = 0; i < e.length; i++) {
                e[i].style.display = "table-cell";
            };
        (function () {
            document.getElementById("showAll").addEventListener("click", showAll);
        })();
        </script>
       
</html>

Answer 1

單擊按鈕后，此腳本將顯示答案。

我添加了按鈕 class class="answer"

該腳本獲取所有帶有“答案”class 的按鈕，並在它們上面放置一個監聽器。 單擊按鈕時，腳本將獲取按鈕最近的前一個元素（即表格）並查找 class “first”的元素。 她給了他風格display:'block'

 var ans = document.querySelectorAll('.answer'); for (var i = 0; i < ans.length; i++) { ans[i].addEventListener("click", function () { showAnswer(this); }); } function showAnswer(el) { var prew = el.previousElementSibling; prew.querySelector('.first').style.display = 'block'; } function showAllAnswersFunc() { var x = document.querySelectorAll('.first'); for (var i = 0; i < x.length; i++) { x[i].style.display = 'block'; } }

 table td.first { display: none; }

 <p> <span class="content_inline_highlight_green_i"> For each of the cases below, please indicate whether you think it is appropriate behaviour or not. Click the box that reflects your view. </span> </p> <table border="1"> <tr> <td>Behaviors</td> <td>Appropriate</td> <td>Inappropriate</td> <td>Answer</td> </tr> <tr> <td>Is it appropriate?</td> <td><input type="radio" name="q1"></td> <td><input type="radio" name="q1"></td> <td class="first">Inappropriate</td> </tr> </table> <input class="answer" type="button" id="showAll" value="Show Answer" /> <hr> <table border="1"> <tr> <td>Behaviors</td> <td>Appropriate</td> <td>Inappropriate</td> <td>Answer</td> </tr> <tr> <td>Is it appropriate?</td> <td><input type="radio" name="q1"></td> <td><input type="radio" name="q1"></td> <td class="first">Inappropriate</td> </tr> </table> <input class="answer" type="button" id="showAll" value="Show Answer" /> <hr> <input type="button" onclick="showAllAnswersFunc()" value="Show All Answer" />

如何單擊按鈕並顯示表格中的列？

問題描述

1 個解決方案

解決方案1
2 已采納 2021-01-05 05:10:20

如何單擊按鈕並顯示表格中的列？

問題描述

1 個解決方案

解決方案1 2 已采納 2021-01-05 05:10:20

解決方案1
2 已采納 2021-01-05 05:10:20