Javascript jQuery表行赢了'；t在表元素中呈现

我使用jQuery在symfony4中的另一个表单中添加和删除表单集合的表行。这并不容易，但最终成功了。使用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>

问题是，当添加更多表单行时，呈现的结果是它们实际上不在表中结束。你可以自己看到（）结果看起来不错，但实际上不是

---

我很确定这与我的jQuery有关，但我现在陷入困境，希望你们中的一些人能指出问题所在

将

div

作为

表的直接子级
是不合适的HTML，这正是它的绊脚石


将
id=“文档列表”数据原型=“…
移动到
表
元素
去掉
div
内
表
将
数据小部件标记更改为
tr
，而不是
div

从数据原型中删除包装
tr

解决方案

jQuery（'.添加另一个集合小部件'）。单击（函数（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（/\u\u name\u\u/g，计数器）；
计数器++；
列表数据（'widget-counter'，计数器）；
var newElem=jQuery（list.attr（'data-widget-tags'））.html（newWidget）；
附录（列表）；
});
$（函数（）{
$（文档）。在（“单击“，”.remove collection小部件”，function（）上{
$（this）.tr.remove（）；
});
})；

添加文档
出于某种原因，我一直在搞乱jQuery，我甚至不知道html是怎么错的。非常感谢！不客气。这是浏览器试图通过猜测它认为你在按照W3C规范做什么来超越你。
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();
  });
});