Овај приручник ће користити ЈаваСцрипт да објасни процедуру за додавање реда у табелу.
Како додати ред у ХТМЛ табелу користећи ЈаваСцрипт?
Да бисте додали ред у табелу, користите следеће процедуре:
Хајде да проверимо сваку процедуру појединачно.
Метод 1: Додајте ред у ХТМЛ табелу користећи метод инсертРов().
„ инсертРов() ” се користи за додавање новог реда на почетак табеле. Он креира нови <тр> елемент и убацује га у табелу. Узима индекс као параметар који дефинише локацију табеле где ће се додати ред. Ако ' 0 ” или ниједан индекс неће бити прослеђен методи, овај метод додаје ред на почетак табеле.
Ако намеравате да додате ред на последњем/крају табеле, онда проследите индекс „ -1 ” као аргумент.
Синтакса
Користите следећу синтаксу за додавање редова у табелу уз помоћ методе инсертРов():
сто. инсертРов ( индекс ) ;
Овде, „ индекс ” означава позицију где желите да додате нови ред, на пример на крају табеле или на почетку.
Пример 1: Додавање реда на врх/почетак табеле
Овде ћемо креирати табелу и дугме у ХТМЛ датотеци користећи ХТМЛ <табле> и <дугме> ознаке. Табела садржи три реда и три колоне или ћелије:
< ид табеле = 'сто' >< тр >
< тд > Целл оф Ров 1 тд >
< тд > Целл оф Ров 1 тд >
< тд > Целл оф Ров 1 тд >
тр >
< тр >
< тд > Целл оф Ров два тд >
< тд > Целл оф Ров два тд >
< тд > Целл оф Ров два тд >
тр >
< тр >
< тд > Целл оф Ров 3 тд >
< тд > Целл оф Ров 3 тд >
< тд > Целл оф Ров 3 тд >
тр >
сто >
< бр >
Затим креирајте дугме које ће позвати „ аддРов() ” дугме када се кликне:
< тип дугмета = 'дугме' онцлицк = 'аддРов()' > Кликните да додате ред на врху табеле дугме >За стилизовање табеле, поставићемо границу сваке ћелије и табеле као што је дато у наставку:
сто, тд {граница : 1пк пуна црна ;
}
Сада ћемо додати редове у табелу на врху/почетку табеле користећи ЈаваСцрипт. Да бисте то урадили, дефинишите функцију под називом „ аддРов() ” који ће бити позван на онцлицк() догађају дугмета. Затим преузмите креирану табелу користећи „ гетЕлементБиИд() ” метод. Након тога позовите „ инсертРов() ” метод преношењем „ 0 ” индекс као параметар који означава да ће ред бити додат на почетак табеле.
Затим позовите „ инсертЦелл() ” преношењем индекса који показују колико ћелија ће бити додато у ред. На крају, додајте текстуалне податке или текст у ћелије користећи „ иннерХТМЛ ' имовина:
фунцтионаддРов ( ) {вар таблеРов = документ. гетЕлементБиИд ( 'сто' ) ;
био ред = таблеРов. инсертРов ( 0 ) ;
где ћелија1 = ред. инсертЦелл ( 0 ) ;
где ћелија2 = ред. инсертЦелл ( 1 ) ;
где ћелија3 = ред. инсертЦелл ( два ) ;
ћелија1. иннерХТМЛ = 'Ћелија новог реда' ;
ћелија2. иннерХТМЛ = 'Ћелија новог реда' ;
ћелија3. иннерХТМЛ = 'Ћелија новог реда' ;
}
Као што видите у излазу, нови ред се додаје на врх постојеће табеле кликом на дугме:
Пример 2: Додавање реда на крај табеле
Ако желите да уметнете ред на последњем/крају табеле, проследите „ -1 ” индекс за “ инсертРов() ” метод. Коначно ће додати ред када се кликне на дугме:
фунцтионаддРов ( ) {вар таблеРов = документ. гетЕлементБиИд ( 'сто' ) ;
био ред = таблеРов. инсертРов ( - 1 ) ;
где ћелија1 = ред. инсертЦелл ( 0 ) ;
где ћелија2 = ред. инсертЦелл ( 1 ) ;
где ћелија3 = ред. инсертЦелл ( два ) ;
ћелија1. иннерХТМЛ = 'Ћелија новог реда' ;
ћелија2. иннерХТМЛ = 'Ћелија новог реда' ;
ћелија3. иннерХТМЛ = 'Ћелија новог реда' ;
}
Излаз
Пређимо на другу методу!
Метод 2: Додајте ред у ХТМЛ табелу креирањем новог елемента
Постоји још један метод за додавање реда у табелу који креира нове елементе користећи ЈаваСцрипт методе, укључујући „ цреатеЕлемент() ” метод и „ аппендЦхилд() ” метод. ЦреатеЕлемент() креира елементе <тр> и <тд>, а метода аппендЦхилд() додаје ћелије и редове у табели.
Синтакса
Пратите дату синтаксу да бисте креирали нови елемент за додавање реда у табели користећи ЈаваСцрипт:
документ. цреатеЕлемент ( 'тр' ) ;Овде, „ тр ” је ред табеле.
Пример
Сада ћемо користити исту претходно креирану табелу у ХТМЛ-у са ЦСС датотеком, али у ЈаваСцрипт датотеци ћемо користити „ цреатеЕлемент() ” метод. Затим додајте податке или текст у ћелије користећи „ иннерХТМЛ ' имовина. На крају, позовите „ аппендЦхилд() ” метод који ће додати ћелије у ред, а затим ред у табелу:
фунцтионаддРов ( ) {вар таблеРов = документ. гетЕлементБиИд ( 'сто' ) ;
био ред = документ. цреатеЕлемент ( 'тр' ) ;
где ћелија1 = документ. цреатеЕлемент ( 'тд' ) ;
где ћелија2 = документ. цреатеЕлемент ( 'тд' ) ;
где ћелија3 = документ. цреатеЕлемент ( 'тд' ) ;
ћелија1. иннерХТМЛ = 'Ћелија новог реда' ;
ћелија2. иннерХТМЛ = 'Ћелија новог реда' ;
ћелија3. иннерХТМЛ = 'Ћелија новог реда' ;
ред. аппендЦхилд ( ћелија1 ) ;
ред. аппендЦхилд ( ћелија2 ) ;
ред. аппендЦхилд ( ћелија3 ) ;
таблеРов. аппендЦхилд ( ред ) ;
}
Излаз показује да је нови ред успешно додат на крај табеле:
Саставили смо све методе за додавање реда у табели користећи ЈаваСцрипт.
Закључак
За додавање реда у табели користите два приступа: метод инсертРов() или креирајте нови елемент користећи ЈаваСцрипт унапред дефинисане методе, укључујући метод аппендЦхилд() и метод цреатеЕлемент(). Можете додати ред на почетак краја табеле користећи метод инсертРов() прослеђивањем индекса. У овом приручнику су објашњене процедуре за додавање новог реда у табелу кликом на дугме користећи ЈаваСцрипт.