उत्पाद कैलकुलेटर में खरीदारी संपादित करना

आइए अब सेल संपादन को लागू करते हैं। शर्त के अनुसार, केवल पहले 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 कॉलम में खरीदारी की लागत बदलनी चाहिए, और कुल राशि की पुनर्गणना भी की जानी चाहिए।

हम इस बारीकियों को अगले पाठ में हल करने के लिए अगले उप-कार्य के रूप में छोड़ देंगे। और शुरुआत के लिए बस पुनर्गणना के बिना, हमारे तीन सेलों के संपादन की संभावना बनाएंगे।