How to click a button and show the column in the table?
Question
Recently I am trying to make a table, I need to hide the answer first and show the answer if I click the button. I tried to create a java function. However, it cannot really work. How can I fix it? thank you!!
<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>
1 answers
solution1
2 ACCPTED 2021-01-05 05:10:20
This script will be show answer after click on the button.
I added on the button class class="answer"
This script takes all the buttons with a "answer" class and puts a listener on them. When the button is clicked, the script takes the nearest previous element of the button (which is the table) and looks for an element with the class "first". And she gives him style 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" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.