Добавление дополнительных строк 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 в 2 местах? (Кстати, так я работаю, который имеет 5 колонок и многое другое HMTL.)

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

Answer 1

В 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»

Надеется, что это помогает

Edit: Ответ на комментарий и к остальной части вопроса

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

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

Answer 2

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

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

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

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