How do i append or prepend this dynamic rows in to the table using jquery

Question

$j=1; ?> var t =''; var options = "";

    </script>   
        <?php 
        foreach ($this->data['DEFAULTS'] as $rec){
            foreach ($rec as $key=>$val){
        ?>
        <script type="text/javascript">
        var cntr = "<?php echo $j;?>";
        var reference_value = '<?php echo $val["GETVAL"];?>';
        var sel = '<select name="code[]">'+options+'</select>';
        var txt  = '<input type="text" class="TextBox" name="referencevalue[]"  valign="top" value="'+ reference_value +'">';                  
            t += '<tr id ='+cntr+'><td>'+cntr+'</td><td valign="top">'+sel+'</td><td valign="top" ailgn="center">'+txt+'</td></tr>';                        
            </script>

        <?php
        $j++;               
                }
            }
        ?>
        <script type="text/javascript">
        alert("MYTABLE "+t);
        $("#ref").append(t);
        </script>

       when i say alert(t) iam getting the entire table structure  and the data  but iam not able to add it  to the table 
   .Here is the Table Structure where i have to add 
                <table width="100%" cellspacing="2" cellpadding="2" align="left">
                <tbody><tr>
                <th class="coltextleft">
                <span style="font-size: 14px; font-weight: bold;" id="id_refTbl">
                <img id="IMG1" height="15" width="15" align="middle" src="cllpsed.gif"/> </span>
                </th>
                </tr>
                <tr><td>
                <div id="ref" style="display:none">
                <table id="ref" width="100%" class="formTable">
                <tr>
                    <td>&nbsp;</td>
                    <td>  Code</td>
                    <td> Value</td>
                    <td>&nbsp;</td>
                </tr>
                <tr><td>I need to add  the result of alert(t) with inthis rows</td></tr></table>

Answer 1

First, kind of meta to the question: why are you doing this? Why not just render the markup directly in the page via PHP instead of rendering <script> elements for the client to accomplish the same task?

---

To directly answer: Your code needs to be wrapped in a document.ready handler, since the element with id="ref" isn't yet in the DOM when you're executing:

$("#ref").append(t);

So it isn't finding the element...that doesn't exist yet. Wrap it in a ready handler, like this:

$(function() {
  $("#ref").append(t);
});

This way it executed after the DOM is completely loaded/ready to go, and the #ref selector will find the <table> you're after.

---

To make this work though, you'll also need to remove the id from <div id="ref" style="display:none">, since IDs need to be unique.

Answer 2

If the variable t is the whole table markup, then yeah, that might not work if you are trying to append it to the table. You'd probably want t to be:

var t = '<tr><td>foo</td></tr>'

At that point, you should be able to:

$("table#ref").append(t)

jQuery#append adds the markup to the end of the target element's children.