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

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

以下のセルです：

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

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

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

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

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

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

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

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