#javascript #php #function #input #html-table
#javascript #php #функция #ввод #html-таблица
Вопрос:
У меня есть следующая таблица <th>
и <td>
следующим образом :
Serial No. Actual QTY Input 1 Input 2
[ x1 ] [ 5 ] [ ] [ ]
[ x2 ] [ 9 ] [ ] [ ]
- обратите внимание, что это
[ ]
указывает как текстовое поле ввода
JS код :
function myFunction(v){
var minus = v.value;
var original = v.getAttribute('data-original');
var x = document.getElementById(v.getAttribute('data-goto'));
x.value = original - minus;
if(x.value < 0){
alert('Actual QTY is Less than Zero!');
}
}
PHP-код :
while($row = mysql_fetch_assoc($result)){
echo "<tr>";
echo "<td>".$row['serial_no']."</td><td>";
echo "<input class='original' type='text' id='c".$row['serial_no']."' value='".$row['qty']."' />";
echo "</td>";
for($i=0;$i<2;$i ){
echo "<td><input data-goto='c".$row['serial_no']."' data-original = '".$row['qty']."' onchange='myFunction(this);' type='text' name='n[]' /></td>";
}
echo "</tr>";
}
Основываясь на приведенной выше таблице, я все, что я хочу, это суммировать Input 1
и Input 2
для каждой строки и находит оставшееся, вычитая сумму двух входных данных из Actual QTY
следующим образом:
Actual QTY = (Input 1 Input 2) - Actual QTY
Код PHP и JS работает только для 1 поля ввода одновременно без суммирования двух входных данных, поэтому, когда пользователь вставляет значение в Input 1
, оно уменьшается по сравнению с фактическим количеством! Но при вставке обоих в Input 1
и Input 2
результат будет false.
Все, что я хочу, это найти способ связать оба поля ввода вместе.
Ответ №1:
Если вы собираетесь делать много подобных вещей, вы можете рассмотреть возможность использования MVVM-фреймворка, такого как knockout или kendo. Они очень помогут при синхронизации связанных элементов на странице.
В этом случае я использовал jQuery, поскольку другие имеют некоторую настройку и были бы излишними, если бы такой тип поведения не был характерен для вашего приложения.
http://jsbin.com/tapoxoke/1/edit?html ,js, вывод
<table>
<tr>
<th>Actual Qty</td>
<th>Input 1</td>
<th>Input 2</td>
</tr>
<tr>
<td class="actual-qty">5</td>
<td><input/></td>
<td><input/></td>
</tr>
<tr>
<td class="actual-qty">7</td>
<td><input/></td>
<td><input/></td>
</tr>
<tr>
<td class="actual-qty">3</td>
<td><input/></td>
<td><input/></td>
</tr>
</table>
<script>
$('input').on('change', function(e) {
var $inputElement = $(e.target);
$tableRow = $inputElement.closest('tr');
$bothInputs = $tableRow.find('input');
var actualQtyElement = $tableRow.find('.actual-qty')[0];
var sumOfInputs = getSumOfInputs($bothInputs);
var actual = getValueFromString(actualQtyElement.textContent);
if(actual < sumOfInputs) {
alert('Actual QTY is Less than Zero!');
}
});
var getSumOfInputs = function($inputs) {
var sum = 0;
$inputs.each(function(index) {
var input = $inputs[index];
sum = getValueFromString(input.value);
});
return sum;
};
var getValueFromString = function(value) {
value = parseInt(value);
var isNan = Number.isNaN(value);
return (isNan) ? 0 : value;
};
</script>