Блог

Я использую Django 1.6 вместе с расширением библиотеки django-formset-js для динамического изменения размеров наборов форм с помощью jQuery на стороне клиента. Эта библиотека требует, чтобы вы заключали определенные элементы ваших форм в именованные разделы.

Я ожидаю создать одну таблицу со всеми моими формами внутри нее. Согласно документации и предыдущему опыту, использование {{ form.as_table }} будет отображать форму в виде набора <tr>...</tr> строк таблицы (https://docs.djangoproject.com/en/dev/topics/forms/#form-rendering-options ).

Однако Django визуализирует HTML таким образом, что мои оберточные divs пусты и не соответствуют друг другу. Элементы div также перемещаются за пределы таблицы вместо переноса соответствующих <tr>...</tr> строк. Почему средство визуализации ведет себя таким образом с табличными формами, когда проблема не воспроизводится с {{ form.as_p }} помощью или {{ form.as_ul }} ?

Шаблон:

 <form>
  <div id="formset" data-formset-prefix="{{ view.form.prefix }}">
    <!-- .... -->      
    <table>
      <div data-formset-body="">
        {% for form in view.form %}
        <div data-formset-form="">
          {{ form.as_table }}
          <tr>
            <td>
              <button data-formset-delete-button="" type="button" >Delete form</button>
            </td>
          </tr>
        </div>
        {% endfor %}
      </div>
      <!--  .... -->     
    </table>
  </div>
</form>
  

Визуализированный HTML:

 <form>
  <div id="formset" data-formset-prefix="...">
    <div data-formset-body="">
      <div data-formset-form="">
      </div>
    </div>
    <div data-formset-form="">
    </div>
    <div data-formset-form="">
    </div>
    <table>
      <!-- all the forms end up here -->
      <tr>...</tr> 
      <tr>...</tr>           
      <tr>...</tr> 
    </table>
  </div>
</form>
  

Хорошо, на самом деле это ошибка новичка HTML с моей стороны. Я думал о <div> наборе фигурных скобок вместо элемента дерева рендеринга (которым он на самом деле является).

Проведя дальнейшие исследования, я обнаружил, что смешивание <div> и <table> является нарушением стандартов HTML и приведет к неопределенному поведению. В частности:

«При размещении div внутри таблицы важно помнить, что div должен находиться внутри определенной ячейки таблицы, то есть внутри элемента td, который находится внутри элемента tr или th». (http://css-tricks.com/using-divs-inside-tables /)

Из этого следует, что разделение Django divs из таблицы, вероятно, сделано намеренно при прохождении проверки или чем-то подобном. Кроме того, <span> ведет себя точно так же, как <div> здесь, так что это не решение.

Я могу исправить проблему, заключив каждую форму в отдельную таблицу, причем таблица полностью заключена в div. Затем шаблон преобразуется в действительный HTML и работает должным образом:

Шаблон:

 <form>
  <div id="formset" data-formset-prefix="{{ view.form.prefix }}">
    <!-- .... -->      
    <div data-formset-body="">
      {% for form in view.form %}
      <div data-formset-form="">
        <table>
          {{ form.as_table }}
          <tr>
            <td>
              <button data-formset-delete-button="" type="button" >Delete form</button>
            </td>
          </tr>
        </table>
      </div>
      {% endfor %}
    </div>
    <!--  .... -->     
  </div>
</form>