食品計算機における購入品の編集

それでは、セルの編集機能を実装しましょう。条件として、最初の 3 つのセルのみ編集可能です。

以下のセルです：

createCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');

明らかに、各セルに対する編集コードは同じになるでしょう：セルをダブルクリックすると、セル内のテキストの代わりに入力フィールドが表示され、入力フィールドで Enter を押すと、その内容がセルの新しいテキストになるようにします。

私は、テーブルセルをパラメータとして受け取り、編集機能をバインドする関数を作成することを提案します：

function allowEdit(td) {
	td.addEventListener('dblclick', function() {
		
	});
}

そうすれば、私たちは次のようにこの関数を適用できます：

allowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));

注意深い読者は、すべてのセルが同じではないことに気づくかもしれません：なぜなら、価格セルや数量セルが変更された場合、 cost 列の購入費用が変更される必要があり、また合計金額の再計算が実行される必要があるからです。

このニュアンスは、次のレッスンで解決する次のサブタスクとして残しておきます。まずは、再計算なしで、私たちの3つのセルの編集機能を単純に実装しましょう。

私が説明したセルの編集機能を実装してください。