Question

我有一个模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'selfserve/style.css' %}" />
  </head>
  <body>
    <form method="post" action="">
      {% csrf_token %}
      {{ modelformset.management_form }}
    <div id="form_set">
        {{ modelformset.non_form_errors.as_ul }}
        <table id="formset" class="form">
        {% for form in modelformset.forms %}
          {% if forloop.first %}
          <thead><tr>
            {% for field in form.visible_fields %}
            <th>{{ field.label|capfirst }}</th>
            {% endfor %}
          </tr></thead>
          {% endif %}
          <tr>
          {% for field in form.visible_fields %}
            <td>
            {% if forloop.first %}
              {% for hidden in form.hidden_fields %}
              {{ hidden }}
              {% endfor %}
            {% endif %}
              {{ field.errors.as_ul }}
              {{ field }}
            </td>
          {% endfor %}
          </tr>
        {% endfor %}
        </table>
    </div>
    <div id="empty_form" style="display:none">
      <table class='no_error'>
        <tr>
          {% for field in modelformset.empty_form %}
          <td>
            {{ field }}
          </td>
          {% endfor %}
        </tr>
      </table>
    </div>
    <input type="button" value="Add" id="add_more">
    <input type="submit" value="Submit">
    <script>
        $('#add_more').click(function() {
            var form_idx = $('#id_form-TOTAL_FORMS').val();
            $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
            $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        });
    </script>
    {% if messages %}
    <ul class="messages">
        {% for message in messages %}
        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
    </form>
    </body>
</html>

该模板包含由jQuery运行的“添加更多”按钮。它基于包含一些现有数据的模型表单集。使用此模板，现有数据以精美的表格格式显示。但是，当我单击“添加更多”按钮时，一个空表单以表格格式显示...但它没有对齐。我认为CSS由于某种原因没有以相同的方式应用于两个表，我无法弄清楚原因。

如果我将以下内容放在empty_form div中，则会出现新表单，但显然不是表格格式：

<table class='no_error'>
        {{ modelformset.empty_form.as_table }}
</table>

我应该如何调整模板，以便适当添加新表单并以对齐的表格形式显示？另外，有没有办法简化这个模板的表格方面的逻辑？

感谢您有任何见解！

更新

我补充说：

<tr>
{% for field in modelformset.empty_form %}
<td>
{{ field }}
<td>
{% endfor %}
</tr>

这为我提供了正确的字段和表格格式。但是，第二个字段从与formset中的现有表单不同的点开始，因此新添加的表单未正确对齐。出于某种原因，我认为css不像现有表单那样应用于empty_form表。

Django - 以表格格式添加空表格

0 个答案: