Šiame tinklaraščio įraše bus parodytas „JavaScript“ dinaminės lentelės kūrimo procesas.
Kaip dinamiškai sukurti lentelę „JavaScript“?
Pažiūrėkime pavyzdį, paaiškinantį, kaip bus sukurta dinaminė lentelė JavaScript.
Pavyzdys
Norėdami pradėti, parašykite šias eilutes naujame HTML dokumente, kad sukurtumėte formą, kuri paima duomenis ir parodys juos lentelėje, pridėdama juos dinamiškai:
< dal id = 'mano forma' >
< h4 > Užpildykite žemiau esančią formą : h4 >
< etiketė > vardas : etiketė >
< įvesties tipas = 'tekstas' id = 'vardas' >< br >< br >
< etiketė > Lytis : etiketė >
< įvesties tipas = 'tekstas' id = 'Lytis' >< br >< br >
< etiketė > Paskyrimas : etiketė >
< įvesties tipas = 'tekstas' id = 'paskyrimas' >< br >< br >
< etiketė > Prisijungimas Data : etiketė >
< įvesties tipas = 'data' id = 'data' >< br >< br >
< mygtuko ID = 'papildyti' vertė = 'Papildyti' > Pridėti duomenis į lentelę mygtuką >
div >
Aukščiau pateiktame kodo fragmente:
- Pirmiausia sukurkite antraštę „ Užpildykite žemiau esančią formą: “.
- Sukurkite įvesties laukus „ vardas “, „ Lytis “, „ Paskyrimas “ ir „ Įstojimo data 'su priskirtais ID' vardas “, „ Lytis “, „ paskirtis “ ir „ data “, kad paimtumėte įvesties reikšmes iš vartotojo.
- Šie ID naudojami norint gauti „JavaScript“ elementų nuorodą.
- Tada sukurkite mygtuką su „ paspaudus “ nuosavybė, kuri vadinsis “ addTableRow() “ funkcija scenarijaus faile, kad pridėtumėte ir rodytumėte duomenis lentelėje:
Čia, HTML faile, parašykite šias kodo eilutes, kad sukurtumėte lentelės struktūrą, kurioje duomenys bus dinamiškai pridedami:
< div >
< h4 > Darbuotojo įrašas b > h4 >
< centras >
< lentelės ID = 'tableData' siena = '1' ląstelių užpildymas = 'du' >
< tr >
< td >< b > vardas b > td >
< td >< b > Lytis b > td >
< td >< b > Paskyrimas b > td >
< td >< b > Įstojimo data b > td >
tr >
stalo >
centras >
div >
Aukščiau pateiktame kode:
- Sukurkite lentelę su ID ' lentelėData “, kuris bus naudojamas scenarijaus faile norint gauti šios lentelės nuorodą ir pridėti prie jos duomenis.
- Lentelėje yra keturi stulpeliai „ vardas “, „ Lytis “, „ Paskyrimas “ ir „ Įstojimo data “, kuriame bus saugomi duomenys pagal stulpelių pavadinimus.
Paleidus HTML failą bus pateikta tokia naršyklės išvestis:
Pridėkime funkcionalumą, leidžiantį dinamiškai kurti lenteles naudojant JavaScript. Scenarijaus faile arba žymoje naudokite toliau pateiktą kodą, kuris dinamiškai sukurs lentelę:
funkcija AddTableRow ( ) {buvo vardas = dokumentas. getElementById ( 'vardas' ) ;
buvo Lytis = dokumentas. getElementById ( 'Lytis' ) ;
buvo paskirtis = dokumentas. getElementById ( 'paskyrimas' ) ;
buvo data = dokumentas. getElementById ( 'data' ) ;
buvo stalo = dokumentas. getElementById ( 'tableData' ) ;
buvo eilučių skaičius = stalo. eilučių . ilgio ;
buvo eilė = stalo. įterpti eilutę ( eilučių skaičius ) ;
eilė. įterptiCell ( 0 ) . vidinis HTML = vardas. vertė ;
eilė. įterptiCell ( 1 ) . vidinis HTML = Lytis. vertė ;
eilė. įterptiCell ( du ) . vidinis HTML = paskirtis. vertė ;
eilė. įterptiCell ( 3 ) . vidinis HTML = data. vertė ;
}
Aukščiau pateiktame fragmente:
- Pirmiausia apibrėžkite funkciją ' addTableRow() “, kuris suaktyvins HTML mygtuko paspaudimo įvykį.
- Tada gaukite visų įvesties laukų nuorodas po vieną naudodami atitinkamus priskirtus ID naudodami „ getelementById() “ metodą ir išsaugokite juos kintamuosiuose.
- Šie kintamieji bus naudojami norint gauti įvesties laukų vertę naudojant HTML ' vertė “ ypatybę ir nustatykite juos atskiruose lentelės langeliuose naudodami „ vidinis HTML ' nuosavybė.
- Pridėkite eilutes į lentelę naudodami „ lentelė.eilutės.ilgis “ nuosavybę ir tada saugokite joje vertybes.
Išvestis
Aukščiau pateikta išvestis rodo, kad dinaminė lentelė sėkmingai sukurta pridedant duomenis į formą naudojant JavaScript.
Išvada
Dinaminė lentelė sukuriama naudojant skirtingas HTML ypatybes su iš anksto nustatytais JavaScript metodais. Pirmiausia sukurkite formą HTML faile ir gaukite laukų nuorodas naudodami „JavaScript“ iš anksto nustatytus metodus, tokius kaip „ getElementById() “ metodą, tada gaukite įvestas reikšmes naudodami „ vertė ' nuosavybė. Nustatykite šias reikšmes atitinkamuose lentelės stulpeliuose naudodami „ vidinis HTML ' nuosavybė. Šiame tinklaraščio įraše demonstruojamas dinaminės lentelės „JavaScript“ kūrimo procesas.