Создать редактируемые новые строки в таблице

Question

Я пытаюсь добавить детали в базу данных, используя динамические строки ajax и таблицы.

например.

----

{Заказчик: выпадающее меню} | {Описание: текстовая область} | удалить

Добавить нового клиента

---

Когда пользователь нажимает, отображается раскрывающееся меню всех доступных клиентов. когда вы нажимаете кнопку, он просто показывает имя выбранного клиента (не выпадающее меню)

Аналогично описанию, которое я хочу щелкнуть, чтобы они могли редактировать описание текстовой области, но когда вы щелкаете, он показывает только текст, который вы только что ввели. (не контур текстовой области)

Кнопка Добавить нового клиента создает новую пустую строку.

Какие библиотеки или примеры могут помочь мне начать с этим?

Я недавно видел это в приложении. В этом приложении можно было добавлять новые элементы / строки через ajax и динамический HTML.

Answer 1

Вы должны быть в состоянии сделать это достаточно легко, используя jQuery (посмотрите на селекторы, события и манипуляции в их документах). Например, для выпадающего списка

<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
    <option class="name" value="cust-1">Frank Frankson</option>
    <option class="name" value="cust-2">John Johnson</option>
</select>

И JQuery:

$('.name').click(function(){        
    $('#customer-name').text($(this).text());
    $('#customer-list').hide();
});

В этой функции вы можете сделать что-то со значением элемента option, если это необходимо (пост ajax или что-то еще).

Принцип для изменения описания текстовой области был бы таким же (вы могли бы извлечь текст из текстовой области, добавить его в раздел и скрыть текстовую область; если им нужно будет снова редактировать, просто покажите текстовую область и скройте дела)

Answer 2

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

<style>
   .blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
    onfocus="this.className=''" 
    onblur="this.className='blurredText'"/>

Стилизовать выделение одним и тем же способом может оказаться затруднительно, поскольку элементы управления выделением общеизвестно устойчивы к CSS. Вы все еще можете использовать метод, предложенный Дейвом.

Answer 3

Используйте jQuery.

Используйте плагин tokenizing для автозаполнения для jQuery

Для редактирования на месте используйте Jeditable .

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

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