У меня есть таблица выбранных продуктов, и я хотел бы использовать javascript для динамического вычисления определенных значений для пользователя без обновления.
Пользователь видит несколько полей: поле ввода количества ( var t0 ), количество единиц ( var amt0 ), общее количество ( var ta0 ) , единичный вес ( var weight0 ) и общий вес ( var tw0 ).
Следующий код работает так, как мне бы хотелось. Количество, введенное пользователем, умножается на количество единиц и устанавливается на общую сумму. То же самое сделано для веса. Нули относятся к первому виду продукта. Проблема в том, что мы не знаем, сколько продуктов выберет пользователь.
Мы можем определить количество продуктов, используя arguments.length . Мой вопрос заключается в том, как я могу построить цикл для замены 0, возможно, переменной итерации i. Нам нужно создать скрипт ниже, чтобы соответствовать количеству выбранных продуктов.
//QTY FIELD
var qtyVal0 = t0.value;
//AMT FIELD
var amtVal0 = amt0.innerHTML;
ta0.value = qtyVal0 * amtVal0;
//WEIGHT FIELD
var weightVal0 = weight0.innerHTML;
tw0.value = qtyVal0 * weightVal0;
Я пытался использовать 'for loop' и var ('qtyVal' + i), а также var qtyVal + i. Плюс каждая комбинация между ними.
Я также пытался просто дублировать вышеупомянутый рабочий скрипт дюжину раз, но, к сожалению, он не работает, когда количество дублирований отличается от количества продуктов.
Javascript - это не моя сильная сторона, поэтому любая помощь (или более эффективный способ расчета) будет принята с благодарностью. Спасибо!
PS При всей моей любви и уважении, мне также нужно будет заняться вопросом добавления всех количеств, сумм и весов в каждом из трех вертикальных столбцов. Я не уверен, повлияет ли это на способ расчета. Еще раз спасибо!
UPDATE
Вот HTML-код для формы, отображаемой для пользователя. Я генерирую его в другом PHP-скрипте и вставляю на страницу, как только пользователь выбирает из списка продуктов. Он отображает 3 продукта в настоящее время, но, как уже упоминалось, это может измениться на любое количество. Надеюсь, это понятнее. Дай мне знать. Приветствия.
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td><!--PRODUCTS SELECTED WILL BE DISPLAYED HERE -->
<div id="txtHint">
<table id="products" width="1050" cellpadding="5" border="1">
<tbody>
<tr>
<th>QTY</th>
<th>Product</th>
<th>Unit Cost</th>
<th>Unit Measure</th>
<th>Amount</th>
<th>Total Amount</th>
<th>Weight</th>
<th>Total Weight</th>
<th>LBS / KGS</th>
<th>Rec D</th>
<th>Rec Q</th>
<th>Status</th>
</tr>
<tr>
<td><input name="t0" id="t0" type="text" onkeyup="return autocalc(this,t1,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Catalogue</td>
<td>$150</td>
<td>Each</td>
<td><span id="amt0">10</span></td>
<td><input name="ta0" id="ta0" type="text" readonly="readonly" value="10" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight0">101</span></td>
<td><input name="tw0" id="tw0" type="text" readonly="readonly" value="101" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t1" id="t1" type="text" onkeyup="return autocalc(this,t0,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product2</td>
<td>$18</td>
<td>Each</td>
<td><span id="amt1">15</span></td>
<td><input name="ta1" id="ta1" type="text" readonly="readonly" value="15" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight1">50</span></td>
<td><input name="tw1" id="tw1" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t2" id="t2" type="text" onkeyup="return autocalc(this,t0,t1)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product3</td>
<td>$236</td>
<td>Each</td>
<td><span id="amt2">1</span></td>
<td><input name="ta2" id="ta2" type="text" readonly="readonly" value="1" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight2">50</span></td>
<td><input name="tw2" id="tw2" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="total" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input name="totalAmount" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td><input name="totalWeight" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div></td>
</tr>
<tr>
<td><input type="submit" id="submitbtn" name="submit" value="Save Changes">
<input type="hidden" name="action" value="create_po"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>