मेरे सारणीबद्ध रूप को गतिशील बनाना

आप टैब्यूलर फॉर्म फ़ील्ड पर गतिशील क्रियाएं बना सकते हैं, लेकिन आपको कुछ जावास्क्रिप्ट/jQuery/डीओएम सामान जानने की जरूरत है क्योंकि इसे पेज आइटम के साथ घोषणात्मक रूप से नहीं किया जा सकता है।

एक उदाहरण के रूप में, मैंने EMP तालिका पर एक सरल सारणीबद्ध प्रपत्र बनाया:

ब्राउज़र के इंस्पेक्ट एलिमेंट टूल का उपयोग करके मैं देख सकता हूं कि पंक्ति 3 पर Ename फ़ील्ड के लिए HTML इस तरह दिखता है:

<input type="text" name="f03" size="12" maxlength="2000" value="Ben Dev"
    class="u-TF-item u-TF-item--text " id="f03_0003" autocomplete="off">

ध्यान देने योग्य प्रासंगिक बिट्स नाम "f03" और आईडी "f03_0003" हैं। सभी सारणीबद्ध प्रपत्र फ़ील्ड के लिए, नाम स्तंभ को इंगित करता है, और उस स्तंभ के सभी फ़ील्ड के लिए समान है। आईडी नाम और पंक्ति को दर्शाने के लिए एक स्ट्रिंग से बना है - इस मामले में पंक्ति 3 का प्रतिनिधित्व करने के लिए "_0003"।

इसी तरह, सभी हायरडेट फ़ील्ड को "f004" नाम दिया गया है और उनमें "f04_0003" जैसी आईडी हैं।

इस जानकारी से लैस होकर हम एक गतिशील क्रिया लिख ​​सकते हैं। उदाहरण के लिए, मान लें कि जब भी Ename खाली हो तो Hiredate को छिपा देना चाहिए, अन्यथा दिखाया जाएगा। छद्म कोड में:

जब भी "f03" नाम वाला कोई तत्व बदला जाता है, तो उसी पंक्ति में "f04" नाम वाले तत्व को छिपाया या दिखाया जाना चाहिए।

तो हम इस तरह की स्थिति के साथ एक समानार्थी क्रिया बना सकते हैं:

• घटना =परिवर्तन
• चयन प्रकार =jQuery चयनकर्ता
• jQuery चयनकर्ता =इनपुट [नाम ="f03"]

यानी जब भी कोई इनपुट जिसका नाम "f03" है बदला जाता है, तो इस क्रिया को सक्रिय करें।

की गई क्रिया को "जावास्क्रिप्ट कोड निष्पादित करें" होना चाहिए, और कोड हो सकता है:

// Get the ID of this item e.g. f03_0004
var this_id = $(this.triggeringElement).attr('id');
// Derive the ID of the corresponding Hiredate item e.g. f04_0004
var that_id = 'f04'+this_id.substr(3);

if ($(this.triggeringElement).val() == "") {
    // Ename is empty so hide Hiredate
    $('#'+that_id).closest('span').hide();
} else {
    // Ename is not empty so show Hiredate
    $('#'+that_id).closest('span').show();
}

चूंकि हायरडेट एक तिथि पिकर है, इसलिए मुझे फ़ील्ड और उसके दिनांक पिकर आइकन दोनों को छिपाने/दिखाने की आवश्यकता है। मैंने उस अवधि को छुपा/दिखाकर ऐसा करना चुना जिसमें वे दोनों शामिल हैं। यह कोड कई अलग-अलग तरीकों से लिखा जा सकता था।

आप अपने लक्ष्यों को प्राप्त करने के लिए समान तकनीकों को लागू कर सकते हैं, लेकिन जैसा कि आप देख सकते हैं कि यह मामूली रूप से आसान नहीं है।