javascript - jQuery 表格行不会在表格元素内呈现

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 元素
• 去掉 table 中的 div
• 将 data-widget-tags 更改为 tr 而不是 div
• 从 data-prototype 中删除包装 tr

解决方案

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 (参见允许的内容)