Добавление дополнительных строк HTML: куда поместить код?

Question

У меня следующая ситуация:

<table><tr><td width="50">
<select name="angle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td><td>
<input type="text" name="what" value="" />
</td></tr></table>
<a href="">+ Add Row</a>

Итак, план таков, что когда пользователь впервые заходит на страницу, он увидит 1 строку. Они будут вводить данные и нажимать «добавить строку» несколько раз, чтобы ввести все свои данные. Позже они смогут вернуться и отредактировать или удалить любую из строк.

Мой вопрос / проблема: в javascript мне нужен полный HTML-код для генерации каждой строки или выполнения AJAX-запроса для получения новой строки с сервера. На сервере мне нужен HTML-код для генерации строк, когда пользователи возвращаются для редактирования или я передаю значения с помощью массива json.

Мне интересно, что бы вы сделали, так как я стараюсь не использовать HTML в двух местах. Вы бы поместили весь HTML в JS? Или вы бы поместили весь HTML на сервер (PHP) и вызывали с помощью AJAX? Или у вас просто будет HTML в двух местах? (Кстати, я работаю над делом, в котором 5 столбцов и намного больше HMTL.)

Я использую: PHP + MySQL + jQuery

Answer 1

Существует несколько подходов к этой проблеме, как вы описали, каждый из которых имеет свои компромиссы. Я экспериментировал с несколькими. Я бы не использовал HTML в двух местах, так как в будущем это будет больше работы для поддержки.

Один из подходов - сохранить HTML на начальной странице - вы можете создать «шаблон» в скрытой строке. Затем вы можете использовать свой веб-язык - PHP или любой другой - для генерации строк сохраненных данных, а также скрытой строки шаблона. Когда пользователь нажимает ссылку / кнопку добавления строки, вы можете клонировать эту строку и вставить ее в конец таблицы или прямо перед строкой шаблона. Преимущество этого заключается в том, что пользователю не нужно ждать вызова ajax для загрузки дополнительных строк. Также вы можете легко изменить дизайн. Потенциальный недостаток - скрыть, как это работает, имея скрытый ряд.

Другой подход - выполнить всю загрузку через ajax и запросить каждую строку HTML. В этом случае я бы порекомендовал либо поместить ваш HTML-код в шаблон, который может быть включен в начальную страницу или загружен с помощью вызова ajax. Весь HTML в одном месте. Вы также можете предварительно загрузить дополнительную строку, чтобы у вас не было задержки AJAX. Когда пользователь нажимает «добавить строку», отобразите скрытую предварительно загруженную строку и загрузите дополнительную скрытую строку.

Наконец, еще один подход - использовать метод строки шаблона, описанный выше (первый вариант), и выполнить ajax-запрос для JSON при загрузке страницы. Затем вы можете заполнить необходимые строки сохраненных данных через ваши js и JSON-данные. Пользователю придется ждать загрузки данных, но это может немного упростить ситуацию.

Answer 2

В уроке jquery у вас есть хороший пример, который вы можете использовать для этого.

В живых примерах (пример C) у вас есть

$("div.contentToChange p:not(.alert)")
  .append("<strong class="addedtext"> This text was just appended to this paragraph</strong>")});

Почему вместо " Поскольку вы добавляете эту строку, вы можете в значительной степени с помощью javascript изменить имя, чтобы вы могли легко ее контролировать.

Как

.append("<input type=\"text\" name=\"row_"+id+"\">.....

Я бы сделал это так:)

Таким образом, вам не придется обновлять веб-страницу каждый раз, когда вы добавляете строку. Также вы можете определить на стороне php после отправки, сколько у вас строк, проанализировав "row_id"

Надеюсь, это поможет

Редактировать: ответ на комментарий и на остальную часть вопроса

Я бы поместил весь HTML, генерируемый при добавлении, это уменьшило бы нагрузку на ваш сервер (хотя и не так сильно), и все было бы просто организовать. Да, и вы бы избежали обновления :) (Это для строки добавления)

Для добавленных строк, которые вы загружаете из базы данных, это должна быть сторона сервера.