Excel-как автоматическое обновление ячейки с помощью JQuery

Question

У меня есть структуру таблицы HTML, который выглядит по линии:

PRICE  QUANTITY TOTAL 
[5____]  [2____]  10 (TOTAL1=PRICE1*QUANTITY1) 

Значения в цене и количестве колонки редактируются. Это поля формы HTML.

Значения в общей колонке не редактируются. Вместо этого они являются прямыми функциями столбцов слева.

HTML-представление таблицы:

<table id="some_id"> 
    <tr> 
    <td><input type="text" name="price1" value="5" /></td> 
    <td><input type="text" name="quantity1" value="2" /></td> 
    <td><input type="readonly" name="total1" /></td> 
    </tr> 
</table> 

Использование JQuery Я хотел бы сделать это так, чтобы значение «total1» всегда отражает значение «price1» раз «Quantity1».

Вопрос: Я понимаю, что существует множество способов добиться этого - но какой будет самый чистый самый сжатый способ сделать это с помощью jQuery?

Поскольку «автоматическое обновление/производные поля» должно быть довольно распространенным прецедентом jQuery, я бы предположил, что для достижения этого существует какой-то лучший метод.

Answer 1

jQuery Calculation plugin (jquery.calculation.js) решает эту проблему.

Следующий код показывает, как использовать JQuery Расчет для решения проблемы в данном конкретном случае:

function recalc() { 
    $("[name=total1]").calc( 
    "p * q", 
    { 
     q: $("input[name=quantity1]"), 
     p: $("input[name=price1]") 
    }, 
    function (s) { 
     // set number of decimals of resulting value to zero 
     return s.toFixed(0); 
    }, 
    function (t) { 
     // this runs after the calculation has been completed 
    } 
); 
} 
$("input[name=price1]").bind("keyup", recalc); 
$("input[name=quantity1]").bind("keyup", recalc); 
recalc(); 

Answer 2

Это должно сделать трюк:

$('input[name^="price"], input[name^="quantity"').keyup(function() { 
    $rowTds = $(this).closest('tr').children('td'); // get the row tds 
    price = $rowTds.eq(0).children('input').val(); // get the price 
    quantity = $rowTds.eq(1).children('input').val(); // get the quantity 
    $rowTds.eq(2).children('input').val(price * quantity); // store the value in the total field 
}); 

Это, вероятно, можно было бы сократить в 2 строки (внутри функции), но я думаю, что это сохраняет его читабельность.