Question

I hav a php code where it displays buttons from A-Z:

  <table id="optionAndAnswer" class="optionAndAnswer">
    <tr class="answer">
    <td>3. 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++;
            }
        ?>

...

What I am trying to do is create a template for the above code in jquery so that if the user wants to add these buttons into a block, then jquery can be used to add these buttons in a block, exactly like a template.

Below is jquery code:

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++;
});

Now this works fine but I have one issue. If you look at the php code, each button has its own id, in my jquery code, each buttons does not have its own id. In my jquery code I want each button to have the same id as their counterparts in php code except only difference is that I want the jquery button id’s to end with “Row”. E.g. if id for button F in php is #answerF, then I want button F in jquery to have id #answerFRow.

My question is that is this possible? Will this code be able to retrieve the buttons id from php code if I put it in jquery code:

.attr('id', $this.attr('id'))

And how do I insert the word “Row” at the end?

Answer 1

.attr('id', $this.attr('id')+'Row')

PHP just generates text, HTML, which the browser reads, and then renders. So, if the PHP code writes the IDs, then jQuery can read them.