Выполнение функций на динамически создаваемой таблице

Question

Я извлекаю 30 хлебобулочных изделий из базы данных mySQL в динамическую таблицу HTML, используя PHP. Полученные данные: Продукт , Элемент (первичный ключ), Вес и Цена . Мой код также создает поле ВВОДА, называемое Количество , для каждого элемента, чтобы пользователь мог вводить, сколько случаев он хочет. Ниже приведен фрагмент кода, используемого для создания динамической таблицы:

        $i=0;

    while ($i < $num) {
        $Item=mysql_result($result,$i,"Item");
        $Product=mysql_result($result,$i,"Product");
        $Weight=mysql_result($result,$i,"Weight");
        $BGPrice=mysql_result($result,$i,"BGPrice");

    echo "<tr>";
    echo "<td>$Product</td>";
    echo "<td><INPUT NAME=Item size=5 value=$Item READONLY></td>";
    echo "<td><INPUT NAME=Weight size=5 value=$Weight READONLY></td>";
    echo "<td><INPUT NAME=Price size=5 value=$BGPrice READONLY></td>";
    echo "<td><INPUT NAME=Quantity size=5 value=0 tabindex=$i></td>";
    echo "<td><INPUT NAME=ExtPrice size=5 value=0 READONLY></td>";
    echo "<td><INPUT NAME=TotalWt size=5 value=0 READONLY></td>";
    echo "</tr>";

    $i++;
    }

Мне нужен JavaScript для вызова функции и вычисления значений для расширенной цены ( ExtPrice ) и общего веса ( TotalWt ), как только пользователь введет количество случаев, в которых он будет нравится на заказ.

Вот моя борьба: в этой динамической таблице 30 предметов, и ИМЯ ВХОДА каждого предмета одинакова. Как создать функцию, которая обновляет ExtPrice и TotalWt для каждого отдельного продукта?

Answer 1

Вы можете использовать переменную $i, чтобы однозначно идентифицировать каждый вход

echo "<td><INPUT NAME=Item id='item$i' size=5 value='$Item' READONLY></td>";

И в качестве примечания используйте кавычки или двойные кавычки для переноса $Item, поскольку он может содержатьпробелы и т.д ..

Answer 2

Ваш JavaScript не должен напрямую ссылаться на каждый input по имени.Вместо этого получите ссылку на соседние ячейки в той же строке.

Если у вас есть кнопка отправки, которая пересчитывает результаты, вот пример:

document.getElementById("sub").addEventListener("click", function(e) {
    var i, row;
    var rows = document.getElementsByTagName("tr");
    // process each row individually
    for (i = 0, row; row = rows[i++];) {
        totalsForRow(row);
    }
    e.preventDefault();
}, false);

// updates the totals for each row
function totalsForRow(tr) {
    var j, inp, fields = {};
    var inputs = tr.getElementsByTagName("input");
    if (!inputs || inputs.length === 0)
        return;
    // map each input by name
    for (j = 0; inp = inputs[j++];) {
        fields[inp.name] = inp;
    }
    // update totals for this row, using the stored ref to the input
    fields.TotalWt.value = fields.Weight.value * fields.Quantity.value;
    fields.ExtPrice.value = fields.Price.value * fields.Quantity.value;
}

Это несделать любую проверку ошибок и может быть улучшено несколькими способами.Это просто для иллюстрации одного подхода.

См. рабочий пример .