Question

I have an application you can access here

When you open the app, please click on the “Open Grid” and select any of the numbered options. You will see some letters buttons (A, B, C etc) Then in the textbox below type in number “0”. After you have done this then click on the “Add Question” button.

The problem is that after you have added a row, the A,B,C… buttons at the top is not displayed which is fine, but it also does not display the A,B,C… buttons in the row you have added. Why is it not displaying the A,B,C … buttons in the added row because I have stated that after the “Add Question” button is clicked, to not display the A,B,C buttons on top, not to hide the A,B,C buttons in the added rows.

Below is the html code where the A,B,C… buttons appear on top:

…

<tr class="answer">
<td>Answer</td>
<td>

<?php
    $a = range("A","Z");
?>

<table id="answerSection">
    <tr>

<?php
    $i = 1;
    foreach($a as $key => $val){
        if($i%7 == 1) echo"<tr><td>";
        echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">";      
        if($i%7 == 0) echo"</td></tr>";
        $i++;
    }
?>
    </tr>
    <tr>
<td>
<input class="answerBtns answers" name="answerTrueName"  id="answerTrue"    type="button"   value="True"    onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerFalseName" id="answerFalse"   type="button"   value="False"   onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerYesName"   id="answerYes"     type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerNoName"    id="answerNo"      type="button"   value="No"      onclick="btnclick(this);"/>
</td>
</tr>
</table>

…

Below is the jquery code where the A,B,C… buttons are displayed in the added rows and the css which is suppose to not display the A,B,C… buttons on top control:

function insertQuestion(form) {   

            var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;        



    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $answer = $("<td class='answer'></td>");


var $this, i=0, $row, $cell;
$('#optionAndAnswer .answers').each(function() {
    $this = $(this);
    if(i%7 == 0) {
        $row = $("<tr/>").appendTo($answer);
        $cell = $("<td/>").appendTo($row);
    }
    var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));


    $newBtn.appendTo($cell);

    i++;
});


    $tr.append($answer);  
    $tbody.append($tr); 


    $('.answerBtns').css('display', 'none');

}

Thanks

Answer 1

This line:

$('.answerBtns').css('display', 'none');

Will hide all elements with the class “answerBtns”, which as far as I can tell includes all of your “A”, “B”, “C” buttons in all parts of the page.

You need to make your selector more specific by, e.g., specifying the containing element as well:

$('#optionAndAnswer .answerBtns').css('display', 'none');

So that it only hides the particular ones you care about. Or give the answer buttons in the bottom section of the page a different class. Either (or both) should do it.

(By the way, you can hide them more easily with $('.answerBtns').hide();.)