Как добавить или добавить эти динамические строки в таблицу с помощью 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

Если переменная t представляет собой разметку всей таблицы, то да, это может не сработать, если вы пытаетесь добавить ее в таблицу. Вы, вероятно, хотели бы, чтобы t:

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

В этот момент вы сможете:

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

jQuery # append добавляет разметку в конец дочерних элементов целевого элемента.

Answer 2

Во-первых, вид мета на вопрос: зачем ты это делаешь?Почему бы просто не визуализировать разметку непосредственно на странице через PHP вместо отображения <script> элементов для клиента, чтобы выполнить ту же задачу?

---

Для прямого ответа: Ваш код требуетбыть обернутым в обработчик document.ready, поскольку элемент с id="ref" еще не находится в DOM, когда вы выполняете:

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

Так что он не находит элемент ...это еще не существует.Оберните его в обработчик ready, например:

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

Таким образом, он выполняется после того, как DOM полностью загружен / готов к работе, и селектор #ref найдет поиск<table> вы после.

---

Чтобы сделать это, вам также нужно удалить id из <div id="ref" style="display:none">, так как идентификаторы должны быть уникальными.