அட்டவணையில் ஒரு வரிசையைச் சேர்ப்பதற்கான செயல்முறையை விளக்க இந்தக் கையேடு JavaScript ஐப் பயன்படுத்தும்.
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி HTML அட்டவணையில் வரிசையைச் சேர்ப்பது எப்படி?
அட்டவணையில் ஒரு வரிசையைச் சேர்க்க, பின்வரும் நடைமுறைகளைப் பயன்படுத்தவும்:
ஒவ்வொரு நடைமுறையையும் தனித்தனியாக சரிபார்க்கலாம்.
முறை 1: insertRow() முறையைப் பயன்படுத்தி HTML அட்டவணையில் வரிசையைச் சேர்க்கவும்
' insertRow() அட்டவணையின் தொடக்கத்தில் புதிய வரிசையைச் சேர்க்க 'முறை பயன்படுத்தப்படுகிறது. இது ஒரு புதிய
அட்டவணையின் கடைசி/முடிவில் வரிசையைச் சேர்க்க விரும்பினால், குறியீட்டைக் கடந்து செல்லவும் ' -1 ” ஒரு வாதமாக.
தொடரியல்
insertRow() முறையைப் பயன்படுத்தி அட்டவணையில் வரிசைகளைச் சேர்க்க பின்வரும் தொடரியல் பயன்படுத்தவும்:
மேசை. செருகுவரிசை ( குறியீட்டு ) ;
இங்கே,' குறியீட்டு ” என்பது அட்டவணையின் முடிவில் அல்லது தொடக்கத்தில் ஒரு புதிய வரிசையைச் சேர்க்க விரும்பும் நிலையைக் குறிக்கிறது.
எடுத்துக்காட்டு 1: அட்டவணையின் மேல்/தொடக்கத்தில் ஒரு வரிசையைச் சேர்த்தல்
இங்கே, HTML ஐப் பயன்படுத்தி ஒரு HTML கோப்பில் ஒரு அட்டவணை மற்றும் பொத்தானை உருவாக்குவோம் <அட்டவணை> மற்றும் <பொத்தான்> குறிச்சொற்கள். அட்டவணையில் மூன்று வரிசைகள் மற்றும் மூன்று நெடுவரிசைகள் அல்லது கலங்கள் உள்ளன:
< அட்டவணை ஐடி = 'மேசை' >< tr >
< td > வரிசையின் செல் 1 td >
< td > வரிசையின் செல் 1 td >
< td > வரிசையின் செல் 1 td >
tr >
< tr >
< td > வரிசையின் செல் இரண்டு td >
< td > வரிசையின் செல் இரண்டு td >
< td > வரிசையின் செல் இரண்டு td >
tr >
< tr >
< td > வரிசையின் செல் 3 td >
< td > வரிசையின் செல் 3 td >
< td > வரிசையின் செல் 3 td >
tr >
மேசை >
< br >
பின்னர், ஒரு பொத்தானை உருவாக்கவும் அது ' addRow() ” பொத்தானை சொடுக்கும் போது:
< பொத்தான் வகை = 'பொத்தானை' கிளிக் செய்யவும் = 'addRow()' > அட்டவணையின் மேலே உள்ள வரிசையைச் சேர்க்க கிளிக் செய்யவும் பொத்தானை >அட்டவணையை வடிவமைக்க, கீழே கொடுக்கப்பட்டுள்ளபடி ஒவ்வொரு கலத்தின் எல்லையையும் அட்டவணையையும் அமைப்போம்:
அட்டவணை, டி.டி {எல்லை : 1px திட கருப்பு ;
}
இப்போது, ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அட்டவணையின் மேல்/தொடக்கத்தில் உள்ள அட்டவணையில் வரிசைகளைச் சேர்ப்போம். அவ்வாறு செய்ய, '' என்ற செயல்பாட்டை வரையறுக்கவும் addRow() ” என்று பொத்தானின் கிளிக்() நிகழ்வில் அழைக்கப்படும். பின்னர், '' ஐப் பயன்படுத்தி உருவாக்கப்பட்ட அட்டவணையைப் பெறவும் getElementById() ”முறை. அதன் பிறகு, அழைக்கவும் ' insertRow() 'முறையை கடந்து செல்வதன் மூலம்' 0 அட்டவணையின் தொடக்கத்தில் வரிசை சேர்க்கப்படும் என்பதைக் குறிக்கும் அளவுருவாக அட்டவணை.
பின்னர், 'என்று அழைக்கவும் செல் () 'வரிசையில் எத்தனை செல்கள் சேர்க்கப்படும் என்பதைக் காட்டும் குறியீடுகளைக் கடந்து செல்லும் முறை. இறுதியாக, '' ஐப் பயன்படுத்தி கலங்களில் உரை தரவு அல்லது உரையைச் சேர்க்கவும் உள் HTML 'சொத்து:
functionaddRow ( ) {var அட்டவணைவரிசை = ஆவணம். getElementById ( 'மேசை' ) ;
வரிசையாக இருந்தது = அட்டவணைவரிசை. செருகுவரிசை ( 0 ) ;
செல்1 = வரிசை. செல் செருகு ( 0 ) ;
செல்2 = வரிசை. செல் செருகு ( 1 ) ;
செல்3 = வரிசை. செல் செருகு ( இரண்டு ) ;
செல்1. உள் HTML = 'புதிய வரிசையின் செல்' ;
செல்2. உள் HTML = 'புதிய வரிசையின் செல்' ;
செல்3. உள் HTML = 'புதிய வரிசையின் செல்' ;
}
வெளியீட்டில் நீங்கள் பார்க்க முடியும் என, பொத்தானைக் கிளிக் செய்வதன் மூலம் புதிய வரிசை ஏற்கனவே இருக்கும் அட்டவணையின் மேல் சேர்க்கப்படும்:
எடுத்துக்காட்டு 2: அட்டவணையின் முடிவில் ஒரு வரிசையைச் சேர்த்தல்
அட்டவணையின் கடைசி/முடிவில் ஒரு வரிசையைச் செருக விரும்பினால், '' -1 'குறியீடு' insertRow() ”முறை. பொத்தானைக் கிளிக் செய்யும் போது அது கடைசியாக வரிசையைச் சேர்க்கும்:
functionaddRow ( ) {var அட்டவணைவரிசை = ஆவணம். getElementById ( 'மேசை' ) ;
வரிசையாக இருந்தது = அட்டவணைவரிசை. செருகுவரிசை ( - 1 ) ;
செல்1 = வரிசை. செல் செருகு ( 0 ) ;
செல்2 = வரிசை. செல் செருகு ( 1 ) ;
செல்3 = வரிசை. செல் செருகு ( இரண்டு ) ;
செல்1. உள் HTML = 'புதிய வரிசையின் செல்' ;
செல்2. உள் HTML = 'புதிய வரிசையின் செல்' ;
செல்3. உள் HTML = 'புதிய வரிசையின் செல்' ;
}
வெளியீடு
வேறு முறைக்கு செல்லலாம்!
முறை 2: புதிய உறுப்பை உருவாக்குவதன் மூலம் HTML அட்டவணையில் வரிசையைச் சேர்க்கவும்
ஜாவாஸ்கிரிப்ட் முறைகளைப் பயன்படுத்தி புதிய கூறுகளை உருவாக்கும் அட்டவணையில் ஒரு வரிசையைச் சேர்ப்பதற்கு மற்றொரு முறை உள்ளது, இதில் ' உருவாக்க உறுப்பு() 'முறை மற்றும்' appendChild() ”முறை. createElement() ஆனது
தொடரியல்
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அட்டவணையில் வரிசையைச் சேர்ப்பதற்கான புதிய உறுப்பை உருவாக்க, வழங்கப்பட்ட தொடரியல் பின்பற்றவும்:
ஆவணம். உருவாக்க உறுப்பு ( 'டிஆர்' ) ;இங்கே, ' tr ” என்பது அட்டவணை வரிசை.
உதாரணமாக
HTML இல் CSS கோப்புடன் முன்பு உருவாக்கிய அதே அட்டவணையை இப்போது பயன்படுத்துவோம், ஆனால் ஜாவாஸ்கிரிப்ட் கோப்பில், ' உருவாக்க உறுப்பு() ”முறை. பின்னர், '' ஐப் பயன்படுத்தி கலங்களில் தரவு அல்லது உரையைச் சேர்க்கவும் உள் HTML ”சொத்து. கடைசியாக, ' appendChild() ” முறையானது செல்களை ஒரு வரிசையில் சேர்க்கும் பின்னர் வரிசையை அட்டவணையில் சேர்க்கும்:
functionaddRow ( ) {var அட்டவணைவரிசை = ஆவணம். getElementById ( 'மேசை' ) ;
வரிசையாக இருந்தது = ஆவணம். உருவாக்க உறுப்பு ( 'டிஆர்' ) ;
செல்1 = ஆவணம். உருவாக்க உறுப்பு ( 'டிடி' ) ;
செல்2 = ஆவணம். உருவாக்க உறுப்பு ( 'டிடி' ) ;
செல்3 = ஆவணம். உருவாக்க உறுப்பு ( 'டிடி' ) ;
செல்1. உள் HTML = 'புதிய வரிசையின் செல்' ;
செல்2. உள் HTML = 'புதிய வரிசையின் செல்' ;
செல்3. உள் HTML = 'புதிய வரிசையின் செல்' ;
வரிசை. appendChild ( செல்1 ) ;
வரிசை. appendChild ( செல்2 ) ;
வரிசை. appendChild ( செல்3 ) ;
அட்டவணைவரிசை. appendChild ( வரிசை ) ;
}
அட்டவணையின் முடிவில் புதிய வரிசை வெற்றிகரமாக சேர்க்கப்பட்டதை வெளியீடு காட்டுகிறது:
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அட்டவணையில் வரிசையைச் சேர்ப்பதற்கான அனைத்து முறைகளையும் தொகுத்துள்ளோம்.
முடிவுரை
அட்டவணையில் ஒரு வரிசையைச் சேர்க்க, இரண்டு அணுகுமுறைகளைப் பயன்படுத்தவும்: insertRow() முறை அல்லது ஜாவாஸ்கிரிப்ட் முன் வரையறுக்கப்பட்ட முறைகளைப் பயன்படுத்தி புதிய உறுப்பை உருவாக்கவும், இதில் appendChild() முறை மற்றும் createElement() முறை ஆகியவை அடங்கும். அட்டவணையின் முடிவில், insertRow() முறையைப் பயன்படுத்தி, குறியீடுகளைக் கடந்து ஒரு வரிசையைச் சேர்க்கலாம். ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு பொத்தானைக் கிளிக் செய்வதன் மூலம் அட்டவணையில் புதிய வரிசையைச் சேர்ப்பதற்கான நடைமுறைகளை இந்தக் கையேடு விளக்குகிறது.