இந்த வலைப்பதிவு இடுகை ஜாவாஸ்கிரிப்டில் டைனமிக் அட்டவணையை உருவாக்கும் செயல்முறையை விளக்குகிறது.
ஜாவாஸ்கிரிப்ட்டில் டைனமிக் முறையில் டேபிளை உருவாக்குவது எப்படி?
ஜாவாஸ்கிரிப்ட்டில் டைனமிக் டேபிள் எவ்வாறு உருவாக்கப்படும் என்பதை விளக்கும் உதாரணத்தைப் பார்ப்போம்.
உதாரணமாக
தொடங்குவதற்கு, ஒரு புதிய HTML ஆவணத்தில் பின்வரும் வரிகளை எழுதவும், அதில் தரவை எடுக்கும் படிவத்தை உருவாக்கவும், பின்னர் அதை மாறும் வகையில் சேர்ப்பதன் மூலம் அட்டவணையில் காண்பிக்கவும்:
< div ஐடி = 'என் வடிவம்' >
< h4 > கீழே உள்ள படிவத்தை நிரப்பவும் : h4 >
< முத்திரை > பெயர் : முத்திரை >
< உள்ளீடு வகை = 'உரை' ஐடி = 'பெயர்' >< br >< br >
< முத்திரை > பாலினம் : முத்திரை >
< உள்ளீடு வகை = 'உரை' ஐடி = 'பாலினம்' >< br >< br >
< முத்திரை > பதவி : முத்திரை >
< உள்ளீடு வகை = 'உரை' ஐடி = 'பதவி' >< br >< br >
< முத்திரை > சேர தேதி : முத்திரை >
< உள்ளீடு வகை = 'தேதி' ஐடி = 'தேதி' >< br >< br >
< பொத்தான் ஐடி = 'கூட்டு' மதிப்பு = 'கூட்டு' > அட்டவணையில் தரவைச் சேர்க்கவும் பொத்தானை >
div >
மேலே உள்ள குறியீடு துணுக்கில்:
- முதலில், ஒரு தலைப்பை உருவாக்கவும் ' கீழே உள்ள படிவத்தை நிரப்பவும்: ”.
- 'க்கான உள்ளீட்டு புலங்களை உருவாக்கவும் பெயர் ”,” பாலினம் ”,” பதவி ', மற்றும் ' சேரும் தேதி 'ஒதுக்கப்பட்ட ஐடியுடன்' பெயர் ”,” பாலினம் ”,” பதவி ', மற்றும் ' தேதி ” முறையே, பயனரிடமிருந்து உள்ளீட்டு மதிப்புகளை எடுக்க.
- ஜாவாஸ்கிரிப்டில் உள்ள உறுப்புகளின் குறிப்பைப் பெற இந்த ஐடிகள் பயன்படுத்தப்படுகின்றன.
- பின்னர், '' உடன் ஒரு பொத்தானை உருவாக்கவும் கிளிக் செய்யவும் 'சொத்து' என்று அழைக்கும் addTableRow() ஒரு ஸ்கிரிப்ட் கோப்பில் உள்ள செயல்பாடு, ஒரு அட்டவணையில் தரவைச் சேர்க்க மற்றும் காட்ட:
இங்கே, HTML கோப்பில், அட்டவணை கட்டமைப்பை உருவாக்க, இந்த குறியீட்டின் வரிகளை எழுதவும், அங்கு தரவு மாறும் வகையில் சேர்க்கப்படும்:
< div >
< h4 > பணியாளர் பதிவு பி > h4 >
< மையம் >
< அட்டவணை ஐடி = 'டேபிள் டேட்டா' எல்லை = '1' செல்பேடிங் = 'இரண்டு' >
< tr >
< td >< பி > பெயர் பி > td >
< td >< பி > பாலினம் பி > td >
< td >< பி > பதவி பி > td >
< td >< பி > சேரும் தேதி பி > td >
tr >
மேசை >
மையம் >
div >
மேலே உள்ள குறியீட்டில்:
- ஐடியுடன் ஒரு அட்டவணையை உருவாக்கவும் ' அட்டவணை தரவு ” இந்த அட்டவணையின் குறிப்பைப் பெற ஸ்கிரிப்ட் கோப்பில் பயன்படுத்தப்படும், பின்னர் அதில் தரவைச் சேர்க்கும்.
- அட்டவணையில் நான்கு நெடுவரிசைகள் உள்ளன, ' பெயர் ”,” பாலினம் ”,” பதவி ', மற்றும் ' சேரும் தேதி ” இது நெடுவரிசைப் பெயர்களுக்கு ஏற்ப தரவைச் சேமிக்கும்.
HTML கோப்பை இயக்குவது பின்வரும் உலாவி வெளியீட்டிற்கு வழிவகுக்கும்:
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி மாறும் வகையில் அட்டவணைகளை உருவாக்குவதற்கான செயல்பாட்டைச் சேர்ப்போம். ஸ்கிரிப்ட் கோப்பு அல்லது குறிச்சொல்லில், கீழே உள்ள குறியீட்டைப் பயன்படுத்தவும், இது ஒரு அட்டவணையை மாறும் வகையில் உருவாக்கும்:
செயல்பாடு addTableRow ( ) {இருந்தது பெயர் = ஆவணம். getElementById ( 'பெயர்' ) ;
இருந்தது பாலினம் = ஆவணம். getElementById ( 'பாலினம்' ) ;
இருந்தது பதவி = ஆவணம். getElementById ( 'பதவி' ) ;
இருந்தது தேதி = ஆவணம். getElementById ( 'தேதி' ) ;
இருந்தது மேசை = ஆவணம். getElementById ( 'டேபிள் டேட்டா' ) ;
இருந்தது வரிசை எண்ணிக்கை = மேசை. வரிசைகள் . நீளம் ;
இருந்தது வரிசை = மேசை. செருகுவரிசை ( வரிசை எண்ணிக்கை ) ;
வரிசை. செல் செருகு ( 0 ) . உள் HTML = பெயர். மதிப்பு ;
வரிசை. செல் செருகு ( 1 ) . உள் HTML = பாலினம். மதிப்பு ;
வரிசை. செல் செருகு ( இரண்டு ) . உள் HTML = பதவி. மதிப்பு ;
வரிசை. செல் செருகு ( 3 ) . உள் HTML = தேதி. மதிப்பு ;
}
மேலே உள்ள துணுக்கில்:
- முதலில், ஒரு செயல்பாட்டை வரையறுக்கவும் ' addTableRow() ” இது HTML பொத்தானின் கிளிக் நிகழ்வைத் தூண்டும்.
- பின்னர், '' ஐப் பயன்படுத்தி அந்தந்த ஒதுக்கப்பட்ட ஐடிகளைப் பயன்படுத்தி அனைத்து உள்ளீட்டு புலங்களின் குறிப்பை ஒவ்வொன்றாகப் பெறவும் getelementById() ” முறை மற்றும் அவற்றை மாறிகளில் சேமிக்கவும்.
- HTML ஐப் பயன்படுத்தி உள்ளீட்டு புலங்களின் மதிப்பைப் பெற இந்த மாறிகள் பயன்படுத்தப்படும். மதிப்பு 'சொத்து மற்றும் அவற்றை அட்டவணையில் உள்ள தனிப்பட்ட கலங்களில் அமைக்கவும்' உள் HTML ”சொத்து.
- 'ஐப் பயன்படுத்தி ஒரு அட்டவணையில் வரிசைகளைச் சேர்க்கவும் அட்டவணை.வரிசைகள்.நீளம் 'சொத்து மற்றும் அதன் மதிப்புகளை சேமிக்கவும்.
வெளியீடு
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு படிவத்தில் தரவைச் சேர்ப்பதன் மூலம் டைனமிக் அட்டவணை வெற்றிகரமாக உருவாக்கப்பட்டது என்பதை மேலே உள்ள வெளியீடு குறிக்கிறது.
முடிவுரை
ஜாவாஸ்கிரிப்ட் முன் வரையறுக்கப்பட்ட முறைகளுடன் வெவ்வேறு HTML பண்புகளைப் பயன்படுத்தி டைனமிக் அட்டவணை உருவாக்கப்பட்டது. முதலில், ஒரு HTML கோப்பில் ஒரு படிவத்தை உருவாக்கவும், பின்னர் ஜாவாஸ்கிரிப்ட் முன் வரையறுக்கப்பட்ட முறைகளைப் பயன்படுத்தி புலங்களின் குறிப்பைப் பெறவும் ' getElementById() ” முறை மற்றும் பின்னர் அவற்றின் உள்ளிடப்பட்ட மதிப்புகளை “ஐப் பயன்படுத்தி மீட்டெடுக்கவும் மதிப்பு ”சொத்து. இந்த மதிப்புகளை அட்டவணையின் அந்தந்த நெடுவரிசைகளில் 'ஐப் பயன்படுத்தி அமைக்கவும். உள் HTML ”சொத்து. இந்த வலைப்பதிவு இடுகை ஜாவாஸ்கிரிப்டில் டைனமிக் அட்டவணையை உருவாக்கும் செயல்முறையை விளக்குகிறது.