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

[Anonymous]

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

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

Item
Price









Add Item

JavaScript (jQuery):

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

$(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);
});
});

**Проблема:
**
Когда пользователь нажимает кнопку «Добавить элемент», добавляется новая строка, но я хочу:

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

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

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

Будем очень признательны за любые рекомендации или фрагменты кода!
< strong>Изменить: я обновил код для использования события изменения, но проблемы по-прежнему возникают.
Хотите ли вы, чтобы я изменил или добавил что-нибудь к этому? вопрос?

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