Tämä blogiviesti esittelee prosessin dynaamisen taulukon luomiseksi JavaScriptissä.
Kuinka luoda taulukko dynaamisesti JavaScriptissä?
Katsotaanpa esimerkkiä, joka selittää, kuinka dynaaminen taulukko luodaan JavaScriptissä.
Esimerkki
Aloita kirjoittamalla seuraavat rivit uuteen HTML-dokumenttiin luodaksesi lomakkeen, joka ottaa tiedot ja näyttää sen sitten taulukossa lisäämällä ne dynaamisesti:
< div id = 'minun muotoni' >
< h4 > Täytä alla oleva lomake : h4 >
< etiketti > Nimi : etiketti >
< syötteen tyyppi = 'teksti' id = 'nimi' >< br >< br >
< etiketti > Sukupuoli : etiketti >
< syötteen tyyppi = 'teksti' id = 'sukupuoli' >< br >< br >
< etiketti > Nimitys : etiketti >
< syötteen tyyppi = 'teksti' id = 'nimitys' >< br >< br >
< etiketti > Liittyy Päivämäärä : etiketti >
< syötteen tyyppi = 'Päivämäärä' id = 'Päivämäärä' >< br >< br >
< painikkeen tunnus = 'lisätä' arvo = 'Lisätä' > Lisää tiedot taulukkoon -painiketta >
div >
Yllä olevassa koodinpätkässä:
- Luo ensin otsikko ' Täytä alla oleva lomake: ”.
- Luo syöttökenttiä ' Nimi ”, “ Sukupuoli ”, “ Nimitys ”, ja ” Liittymispäivämäärä 'jolla on määrätyt tunnukset' nimi ”, “ sukupuoli ”, “ nimitys ”, ja ” Päivämäärä ” ottaaksesi syötetyt arvot käyttäjältä.
- Näitä tunnuksia käytetään JavaScriptin elementtien viittausten saamiseen.
- Luo sitten painike ' klikkaamalla ' kiinteistö, joka kutsuu ' addTableRow() ”-funktio komentosarjatiedostossa tietojen lisäämiseksi ja näyttämiseksi taulukossa:
Kirjoita tähän HTML-tiedostoon nämä koodirivit luodaksesi taulukkorakenteen, johon tiedot lisätään dynaamisesti:
< div >
< h4 > Työntekijätietue b > h4 >
< keskusta >
< taulukon tunnus = 'taulukkotiedot' rajaa = '1' solupehmuste = 'kaksi' >
< tr >
< td >< b > Nimi b > td >
< td >< b > Sukupuoli b > td >
< td >< b > Nimitys b > td >
< td >< b > Liittymispäivämäärä b > td >
tr >
pöytä >
keskusta >
div >
Yllä olevassa koodissa:
- Luo taulukko tunnuksella ' tableData ', jota käytetään komentosarjatiedostossa saadakseen tämän taulukon viitenumeron ja lisäämään sitten tiedot siihen.
- Taulukko sisältää neljä saraketta, ' Nimi ”, “ Sukupuoli ”, “ Nimitys ”, ja ” Liittymispäivämäärä ', joka tallentaa tiedot sarakkeiden nimien mukaan.
HTML-tiedoston suorittaminen johtaa seuraavan selaintulosteen:
Lisätään toiminnallisuutta taulukkojen luomiseen dynaamisesti JavaScriptin avulla. Käytä komentosarjatiedostossa tai -tunnisteessa alla olevaa koodia, joka luo taulukon dynaamisesti:
toiminto addTableRow ( ) {oli nimi = asiakirja. getElementById ( 'nimi' ) ;
oli sukupuoli = asiakirja. getElementById ( 'sukupuoli' ) ;
oli nimitys = asiakirja. getElementById ( 'nimitys' ) ;
oli Päivämäärä = asiakirja. getElementById ( 'Päivämäärä' ) ;
oli pöytä = asiakirja. getElementById ( 'taulukkotiedot' ) ;
oli rivien määrä = pöytä. rivit . pituus ;
oli rivi = pöytä. insertRow ( rivien määrä ) ;
rivi. insertCell ( 0 ) . innerHTML = nimi. arvo ;
rivi. insertCell ( 1 ) . innerHTML = sukupuoli. arvo ;
rivi. insertCell ( kaksi ) . innerHTML = nimitys. arvo ;
rivi. insertCell ( 3 ) . innerHTML = Päivämäärä. arvo ;
}
Yllä olevassa katkelmassa:
- Määritä ensin funktio ' addTableRow() ', joka käynnistää HTML-painikkeen napsautustapahtuman.
- Hanki sitten kaikkien syöttökenttien viittaus yksitellen käyttämällä niille määritettyjä tunnuksia käyttämällä ' getelementById() ” -menetelmää ja tallenna ne muuttujiin.
- Näitä muuttujia käytetään syöttökenttien arvon saamiseksi käyttämällä HTML-koodia ' arvo '-ominaisuutta ja aseta ne taulukon yksittäisiin soluihin käyttämällä ' innerHTML ” omaisuutta.
- Lisää rivejä taulukkoon käyttämällä ' taulukko.rivit.pituus ”-omaisuutta ja tallentaa sitten arvot siihen.
Lähtö
Yllä oleva tulos osoittaa, että dynaaminen taulukko on luotu onnistuneesti lisäämällä tietoja JavaScriptiä käyttävään lomakkeeseen.
Johtopäätös
Dynaaminen taulukko luodaan käyttämällä erilaisia HTML-ominaisuuksia JavaScriptin ennalta määritetyillä menetelmillä. Luo ensin lomake HTML-tiedostoon ja hanki sitten kenttien viittaukset JavaScriptin ennalta määritetyillä menetelmillä, kuten ' getElementById() ' -menetelmää ja nouta sitten syötetyt arvonsa käyttämällä ' arvo ” omaisuutta. Aseta nämä arvot taulukon vastaaviin sarakkeisiin käyttämällä ' innerHTML ” omaisuutta. Tämä blogiviesti esittelee prosessin dynaamisen taulukon luomiseksi JavaScriptissä.