使用textareas [php]在表单中添加行

Question

我想在表单中添加新行，但我不能。点击btn后添加没有任何事情发生。如果我改变标签然后我可以添加一行，但它是坏看的，我认为不正确。

这是我的Javascript：

        $(document).ready(function(){
            var i = 2;
            var rowTemplate = jQuery.format($("#template").val());
            function addRow(){
                var ii = i++;
                $("#list tbody").append(rowTemplate(ii));
                $("#delete_" + ii).click(function(){
                    $("#row_" + ii).remove();
                });
            }
            $(".add_row").click(addRow);
        });

这是我的HTML：

<table id="template" style="display:none;">
                <tr id="row_{0}">

                    <td><input type="text" size="20" name="numer[]"></td>
                    <td><textarea style="resize:both;" name="tresc[]"></textarea></td>
                    <td><textarea style="resize:both;" name="zmianaZapisu[]"></textarea></td>
                    <td><textarea style="resize:both;" name="uzasadnienie[]"></textarea></td>
                    <td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
                </tr>
            </table>

            <table id="list">
                <thead >
                    <tr>
                        <th>Numer jednostki <br />redakcyjnej</th>
                        <th>Treść</th>
                        <th>Proponowana zmiana brzmienia zapisu <br />lub treść nowego zapisu</th>
                        <th>Uzasadnienie</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td><input type ="text" size="20" name="numer[]"></td>
                        <td><textarea style="resize:both;" name="tresc[]"></textarea></td>
                        <td><textarea style="resize:both;" name="zmianaZapisu[]"></textarea></td>
                        <td><textarea style="resize:both;" name="uzasadnienie[]"></textarea></td>

                    </tr>
                </tbody>
            </table>

$oForm->formHTML('<div class="add_btn_block"><div class="row_add_btn add_row">Dodaj wiersz harmonogramu</div></div>');
$oForm->formHTML(addRows());

我不知道可能出现什么问题，但事情确实如此。你能救我吗？

编辑：

帮助行添加后，但表单看起来很糟糕。

这应该是这样的：

这就是现在的样子：

如何更改？

Answer 1

您使用过$("#template").val()

.val()仅适用于表单元素。

尝试将其更改为

 $("#template").html() 

看看是否有帮助。

Answer 2

    <script>
     $(document).ready(function(){
                var i = 2;
                var rowTemplate = $("#template").html();
                function addRow(){
                    var ii = i++;
                    $("#app_here").append(rowTemplate); // changed from '#list tbody' to '#app_here'
                    $("#delete_" + ii).click(function(){
                        $("#row_" + ii).remove();
                    });
                }
                $(".add_row").click(addRow);
            });
    </script>

    <table id="template" style="display:none;">
                    <tr id="row_{0}">

                        <td><input type="text" size="20" name="numer[]"></td>
                        <td><textarea style="resize:both;" name="tresc[]"></textarea></td>
                        <td><textarea style="resize:both;" name="zmianaZapisu[]"></textarea></td>
                        <td><textarea style="resize:both;" name="uzasadnienie[]"></textarea></td>
                        <td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
                    </tr>
                </table>

                <table id="list">
                    <thead >
                        <tr>
                            <th>Numer jednostki <br />redakcyjnej</th>
                            <th>Treść</th>
                            <th>Proponowana zmiana brzmienia zapisu <br />lub treść nowego zapisu</th>
                            <th>Uzasadnienie</th>
                            <th>&nbsp;</th> <!-- Added this column as you have image column -->
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td><input type ="text" size="20" name="numer[]"></td>
                            <td><textarea style="resize:both;" name="tresc[]"></textarea></td>
                            <td><textarea style="resize:both;" name="zmianaZapisu[]"></textarea></td>
                            <td><textarea style="resize:both;" name="uzasadnienie[]"></textarea></td>
                            <td>&nbsp;</td> <!-- Added this column as you have image column -->
                        </tr>
<!-- HTML will be appended here now.. -->
                        <tr>
                            <td colspan="5" id="app_here">

                            </td>
                        </tr>

                    </tbody>
                </table>

您已添加为

<table>
  <tr>
    <td></td>
  </tr>
  <table>
    <tr>
      <td></td>
    </tr>
  </table>
</table>

这不是一个正确的方法..我已添加<tr><td> HEre table will be appeneded </td></tr> .. 检查我的代码的html部分..