Question

我正在使用jQuery在Symfony 4的另一个表单中为一组表单的表单添加和删除表行。这并不容易，但最终使其起作用。在Twig中使用宏，我可以获得以下渲染结果：

<table>
  <div id="document-list" data-prototype="
    <tr>
        <td>
           <fieldset class=&quot;form-group&quot;>
             <div id=&quot;program_programDocument___name__&quot; novalidate=&quot;novalidate&quot;>
                <div class=&quot;form-group&quot;><input type=&quot;text&quot; id=&quot;program_programDocument___name___name&quot; name=&quot;program[programDocument][__name__][name]&quot; required=&quot;required&quot; class=&quot;form-control&quot;/>
                </div>
             </div>
          </fieldset>
       </td>
       <td>
          <button type=&quot;button&quot;class=&quot;remove-collection-widget&quot;data-list=&quot;#remove-collection-widget&quot;>Remove</button>
       </td>
    </tr>" data-widget-tags="<div></div>">
  </div>
</table>
<button type="button" class="add-another-collection-widget" data-list="#document-list">Add document</button>

我尽可能地清理了此代码以使其可读。 data-prototype="...."中的所有HTML都应该如此。我的代码（与jQuery一起使用）：

jQuery('.add-another-collection-widget').click(function(e) {
  var list = jQuery(jQuery(this).attr('data-list'));
  // Try to find the counter of the list or use the length of the list
  var counter = list.data('widget-counter') | list.children().length;
  // grab the prototype template
  var newWidget = list.attr('data-prototype');
  // replace the "__name__" used in the id and name of the prototype
  // with a number that's unique to your emails
  // end name attribute looks like name="contact[emails][2]"
  newWidget = newWidget.replace(/__name__/g, counter);
  // Increase the counter
  counter++;
  // And store it, the length cannot be used if deleting widgets is allowed
  list.data('widget-counter', counter);

  // create a new list element and add it to the list
  var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
  newElem.appendTo(list);
});
$(function() {
  $(document).on("click", ".remove-collection-widget", function() {
    $(this).closest("tr").remove();
  });
});

问题是，当添加更多表单行时，呈现的结果是它们实际上并没有最终出现在表中。您可以自己（JSFiddle）看到结果不错，但实际上并非如此。

我很确定这与我的jQuery有关，但我现在仍然坚持，希望你们中的一些人能指出问题所在。

Answer 1

将div放置为table的直接子代是不正确的HTML，这是将其绊倒的原因。

将id="document-list" data-prototype="...移至table元素
摆脱div内的table
将data-widget-tags更改为tr，而不是div
从tr中删除data-prototype换行

解决方案

jQuery('.add-another-collection-widget').click(function(e) {
  var list = jQuery(jQuery(this).attr('data-list'));
  var counter = list.data('widget-counter') | list.children().length;
  var newWidget = list.attr('data-prototype');
  newWidget = newWidget.replace(/__name__/g, counter);
  counter++;
  list.data('widget-counter', counter);
  var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
  newElem.appendTo(list);
});

$(function() {
  $(document).on("click", ".remove-collection-widget", function() {
    $(this).closest("tr").remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="document-list" data-prototype="
        <td>
           <fieldset class=&quot;form-group&quot;>
             <div id=&quot;program_programDocument___name__&quot; novalidate=&quot;novalidate&quot;>
                <div class=&quot;form-group&quot;><input type=&quot;text&quot; id=&quot;program_programDocument___name___name&quot; name=&quot;program[programDocument][__name__][name]&quot; required=&quot;required&quot; class=&quot;form-control&quot;/>
                </div>
             </div>
          </fieldset>
       </td>
       <td>
          <button type=&quot;button&quot;class=&quot;remove-collection-widget&quot;data-list=&quot;#remove-collection-widget&quot;>Remove</button>
       </td>" data-widget-tags="<tr></tr>">
</table>
<button type="button" class="add-another-collection-widget" data-list="#document-list">Add document</button>

文档

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table（请参阅允许的内容）

jQuery表格行不会在表格元素中呈现

1 个答案:

解决方案

文档