У меня есть набор полей формы (сгенерированный через wtforms) мне действительно нужно только, чтобы показать одну, а затем кнопку добавить:Показать скрыть элементы формы Jquery/Bootstrap
<div class=element-work>
<table id="identifier-0"><tr><th><label for="identifier-0-organization">Organization</label></th><td><input id="identifier-0-organization" name="identifier-0-organization" type="text" value=""></td></tr><tr><th><label for="identifier-0-position">Position</label></th><td><input id="identifier-0-position" name="identifier-0-position" type="text" value=""></td></tr><tr><th><label for="identifier-0-start_time">Start</label></th><td><input id="identifier-0-start_time" name="identifier-0-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-0-end_time">End</label></th><td><input id="identifier-0-end_time" name="identifier-0-end_time" type="text" value=""></td></tr></table>
<table id="identifier-1"><tr><th><label for="identifier-1-organization">Organization</label></th><td><input id="identifier-1-organization" name="identifier-1-organization" type="text" value=""></td></tr><tr><th><label for="identifier-1-position">Position</label></th><td><input id="identifier-1-position" name="identifier-1-position" type="text" value=""></td></tr><tr><th><label for="identifier-1-start_time">Start</label></th><td><input id="identifier-1-start_time" name="identifier-1-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-1-end_time">End</label></th><td><input id="identifier-1-end_time" name="identifier-1-end_time" type="text" value=""></td></tr></table>
<table id="identifier-2"><tr><th><label for="identifier-2-organization">Organization</label></th><td><input id="identifier-2-organization" name="identifier-2-organization" type="text" value=""></td></tr><tr><th><label for="identifier-2-position">Position</label></th><td><input id="identifier-2-position" name="identifier-2-position" type="text" value=""></td></tr><tr><th><label for="identifier-2-start_time">Start</label></th><td><input id="identifier-2-start_time" name="identifier-2-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-2-end_time">End</label></th><td><input id="identifier-2-end_time" name="identifier-2-end_time" type="text" value=""></td></tr></table>
<table id="identifier-3"><tr><th><label for="identifier-3-organization">Organization</label></th><td><input id="identifier-3-organization" name="identifier-3-organization" type="text" value=""></td></tr><tr><th><label for="identifier-3-position">Position</label></th><td><input id="identifier-3-position" name="identifier-3-position" type="text" value=""></td></tr><tr><th><label for="identifier-3-start_time">Start</label></th><td><input id="identifier-3-start_time" name="identifier-3-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-3-end_time">End</label></th><td><input id="identifier-3-end_time" name="identifier-3-end_time" type="text" value=""></td></tr></table>
<table id="identifier-4"><tr><th><label for="identifier-4-organization">Organization</label></th><td><input id="identifier-4-organization" name="identifier-4-organization" type="text" value=""></td></tr><tr><th><label for="identifier-4-position">Position</label></th><td><input id="identifier-4-position" name="identifier-4-position" type="text" value=""></td></tr><tr><th><label for="identifier-4-start_time">Start</label></th><td><input id="identifier-4-start_time" name="identifier-4-start_time" type="text" value=""></td></tr><tr><th><label for="identifier-4-end_time">End</label></th><td><input id="identifier-4-end_time" name="identifier-4-end_time" type="text" value=""></td></tr></table>
</div>
Мои варианты:
1) загружать все со страницей, использовать JS, чтобы показать/скрыть необходимые поля
2) имеют JS клон/добавлять поля, когда кнопка нажимается
Любопытно, но вариант 1 является наименее работоспособным на данный момент (но я предполагаю, что больше потребляет полосу пропускания в долгосрочной перспективе для миллиардов запросов, но я не беспокоюсь об этом сейчас): что такое самый простой способ с jquery/bootstrap, чтобы при необходимости скрывать последующие части поля? Я на самом деле не человек js, но, глядя на него, он должен быть достаточно простым, но я публикую, чтобы посмотреть, какие решения люди могут предложить, пока я работаю над этим.
, чтобы скрыть все таблицы на одном дыхании -> $ ("таблица [ID = 'идентификатор -']"). Скрыть() – Mutant