Как динамически обновлять строку таблицы на основе пользовательского ввода ⇐ CSS

[Anonymous]

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

• Проверить вводимые пользователем данные (например, проверить, не является ли имя товара пустым, а цена является положительным числом).
  Динамически обновлять строки таблицы, когда пользователь меняет поля ввода.
• Удалять повторяющиеся имена элементов.

• Использование события изменения в полях ввода не обновляет строки таблицы.
• Использование размытия событие в полях ввода, но оно не проверяет ввод.

Будем очень признательны за любые рекомендации или фрагменты кода!

Код: Выделить всё

$(document).ready(function() {
$('#add-item').click(function() {
// Get user input
var itemName = $('#item-name').val();
var itemPrice = $('#item-price').val();

// Create new table row
var newRow = $('');
newRow.append($('').text(itemName));
newRow.append($('').text(itemPrice));

// Add row to table body
$('#item-table tbody').append(newRow);
});
});

Код: Выделить всё

Item
Price









Add Item

Подробнее здесь: https://stackoverflow.com/questions/790 ... user-input