CODEWITHSUNDEEP
javascripthtml
aukk123
aukk123

Reputation: 323

How to click a button and show the column in the table?

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>

Upvotes: 0

Views: 325

Answers (1)

54ka
54ka

Reputation: 3589

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" />

Upvotes: 2

Related Questions