இந்த வலைப்பதிவு இடுகை ஜாவாஸ்கிரிப்டில் அட்டவணையை வடிகட்டுவதற்கான செயல்முறையை வரையறுக்கும்.
ஜாவாஸ்கிரிப்ட்டில் அட்டவணையை வடிகட்டுவது எப்படி?
ஜாவாஸ்கிரிப்டில் அட்டவணையை வடிகட்டுவது எப்படி என்பதை விளக்கும் உதாரணத்தைப் பார்ப்போம்.
உதாரணமாக
முதலில், ஒரு HTML ஆவணத்தில் தேடல் பட்டியை உருவாக்கவும். onkeyup 'சொத்து' என்று அழைக்கும் filterTableFunc() 'விசை வெளியிடப்படும் போது:
< உள்ளீடு வகை = 'உரை' ஐடி = 'தேடல்' onkeyup = 'filterTableFunc()' இடப்பெயர்ச்சி = 'தேடு.....' >< br >< br >
இதைப் பயன்படுத்தி பணியாளர் தரவைச் சேமிக்கும் அட்டவணையை உருவாக்கவும் <அட்டவணை> குறிச்சொல் மற்றும் ஒரு ஐடியை ஒதுக்கவும் ' பணியாளர் தரவு ”:
< அட்டவணை ஐடி = 'பணியாளர் தரவு' எல்லை = '1' >
< tr >
< வது > பெயர் வது >
< வது > மின்னஞ்சல் வது >
< வது > பாலினம் வது >
< வது > பதவி வது >
< வது > சேரும் தேதி வது >
tr >
< tr >
< td > ஜான் td >
< td > ஜான் @ ஜிமெயில். உடன் td >
< td > ஆண் td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > ஸ்டீபன் td >
< td > ஸ்டீபன் @ ஜிமெயில். உடன் td >
< td > ஆண் td >
< td > HRM td >
< td > இருபத்து ஒன்று / 10 / 2020 td >
tr >
< tr >
< td > பெரிய td >
< td > mari78 @ ஜிமெயில். உடன் td >
< td > பெண் td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > ரோண்டா td >
< td > ரோண்டா12 @ ஹாட்மெயில். உடன் td >
< td > ஆண் td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
மேசை >
HTML கோப்பை இயக்கிய பிறகு, வெளியீடு இப்படி இருக்கும்:
அதன் பிறகு, வடிகட்டி அட்டவணையில் செயல்பாட்டைச் சேர்ப்போம். JavaScript ஸ்கிரிப்ட் கோப்பு அல்லது குறிச்சொல்லில், தேடலின் அடிப்படையில் அட்டவணையின் தரவை வடிகட்ட கீழே உள்ள குறியீட்டைப் பயன்படுத்தவும்:
செயல்பாடு filterTableFunc ( ) {
இருந்தது வடிகட்டி முடிவு = ஆவணம். getElementById ( 'தேடல்' ) . மதிப்பு . லோயர்கேஸ் ( ) ;
இருந்தது காலி அட்டவணை = ஆவணம். getElementById ( 'பணியாளர் தரவு' ) ;
இருந்தது tr = காலி அட்டவணை. getElementsByTagName ( 'டிஆர்' ) ;
க்கான ( இருந்தது நான் = 1 ; நான் < tr. நீளம் ; நான் ++ ) {
tr [ நான் ] . பாணி . காட்சி = 'இல்லை' ;
நிலையான tdArray = tr [ நான் ] . getElementsByTagName ( 'டிடி' ) ;
க்கான ( இருந்தது ஜே = 0 ; ஜே - 1 ) {
tr [ நான் ] . பாணி . காட்சி = '' ;
உடைக்க ;
}
}
}
}
மேலே கொடுக்கப்பட்ட குறியீட்டில்:
- முதலில், ஒரு செயல்பாட்டை வரையறுக்கவும் ' filterTableFunc() ”.
- தேடல் பட்டியை அதன் ஐடியைப் பயன்படுத்தி அணுகவும் ' தேடல் 'உள்ளிட்ட மதிப்பைப் பெறவும், '' ஐப் பயன்படுத்தி அதை சிறிய எழுத்தாக மாற்றவும் லோயர்கேஸ்() ”முறை.
- அதன் ஐடியைப் பயன்படுத்தி வடிகட்டி செயல்பாடு செய்யப்படும் அட்டவணையின் குறிப்பைப் பெறவும் ' பணியாளர் தரவு ”.
- பின்னர், '' ஐப் பயன்படுத்தி அட்டவணை வரிசைகளைப் பெறுங்கள் getElementsByTagName ”முறை.
- அட்டவணையை அதன் நீளம் வரை மீண்டும் செய்யவும், ஒவ்வொரு அட்டவணை உள்ளீட்டிற்கான தரவைப் பெறவும், மேலும் அட்டவணையின் சேமிக்கப்பட்ட மதிப்பு தேடப்பட்ட மதிப்புக்கு சமமாக உள்ளதா எனச் சரிபார்க்கவும். அது இருந்தால், அதைக் காட்டவும்.
வெளியீடு
மேலே உள்ள வெளியீடு அட்டவணையில் வடிகட்டி செயல்பாடு வெற்றிகரமாகப் பயன்படுத்தப்பட்டதைக் குறிக்கிறது.
முடிவுரை
டேபிள் டேட்டாவை மீண்டும் மீண்டும் செய்து, அதற்குரிய டேட்டாவை வழங்குவதன் மூலம் ஒரு அட்டவணையை ஜாவாஸ்கிரிப்டில் வடிகட்டலாம். இந்த வடிகட்டுதல் ஒரு குறிப்பிட்ட நிகழ்வின் மூலம் அழைக்கப்படும் ஒரு செயல்பாட்டின் மூலம் செய்யப்படுகிறது. உள்ளீடு உரை புலத்தில் உள்ள கேஸ் உணர்திறனைப் பொருட்படுத்தாமல், உள்ளிடப்பட்ட ஒரே தரவுகளில், அட்டவணையில் இருந்து தொடர்புடைய தரவு பெறப்படும் வகையில் இந்த அணுகுமுறை செயல்படும். ஜாவாஸ்கிரிப்டில் அட்டவணையை வடிகட்ட பயன்படுத்தக்கூடிய அணுகுமுறையை இந்த இடுகை விவரிக்கிறது.