Kuinka lisätä rivi HTML-taulukkoon JavaScriptin avulla

Joskus verkkosivustoa kehitettäessä voi olla vaatimus luoda tai poistaa rivejä ja soluja tai lisätä tietoja taulukkoon dynaamisesti JavaScriptin avulla. JavaScript on dynaaminen kieli, joka auttaa hallitsemaan dynaamisesti, pääsemään käsiksi ja muokkaamaan HTML-komponentteja asiakaspuolella. Tarkemmin sanottuna sitä voidaan käyttää rivin lisäämiseen HTML-taulukkoon.

Tässä oppaassa käytetään JavaScriptiä selittämään menettely rivin lisäämiseksi taulukkoon.

Kuinka lisätä rivi HTML-taulukkoon JavaScriptin avulla?

Voit lisätä rivin taulukkoon seuraavasti:

insertRow() -menetelmä
Luo uusi elementti

Tarkastetaan jokainen toimenpide erikseen.

Tapa 1: Lisää rivi HTML-taulukkoon insertRow()-menetelmällä

' insertRow() ” -menetelmää käytetään uuden rivin lisäämiseen taulukon alkuun. Se luo uuden -elementin ja lisää sen taulukkoon. Se ottaa indeksin parametrina, joka määrittää taulukon sijainnin, johon rivi lisätään. Jos ' 0 ' tai menetelmässä ei välitetä indeksiä, tämä menetelmä lisää rivin taulukon alkuun.

Jos aiot lisätä rivin taulukon viimeiseen/päähän, välitä indeksi ' -1 'argumenttina.

Syntaksi

Käytä seuraavaa syntaksia lisätäksesi rivejä taulukkoon insertRow()-menetelmän avulla:

pöytä. insertRow ( indeksi ) ;

Täällä, ' indeksi ” osoittaa paikan, johon haluat lisätä uuden rivin, esimerkiksi taulukon loppuun tai alkuun.

Esimerkki 1: Rivin lisääminen taulukon alkuun/yläosaan

Täällä luomme taulukon ja painikkeen HTML-tiedostoon käyttämällä HTML-koodia ja tunnisteet. Taulukko sisältää kolme riviä ja kolme saraketta tai solua:

< taulukon tunnus = 'pöytä' >

< tr >

< td > Rivin solu 1 td >

< td > Rivin solu 1 td >

< td > Rivin solu 1 td >

tr >

< tr >

< td > Rivin solu kaksi td >

< td > Rivin solu kaksi td >

< td > Rivin solu kaksi td >

tr >

< tr >

< td > Rivin solu 3 td >

< td > Rivin solu 3 td >

< td > Rivin solu 3 td >

tr >

pöytä >

< br >

Luo sitten painike, joka kutsuu ' addRow() ”-painiketta, kun sitä painetaan:

< painikkeen tyyppi = 'painike' klikkaamalla = 'addRow()' > Napsauta lisätäksesi rivin taulukon yläreunassa -painiketta >

Taulukon tyyliä varten asetamme kunkin solun ja taulukon reunan alla kuvatulla tavalla:

pöytä, td {

rajaa : 1px kiinteä musta ;

}

Nyt lisäämme rivejä taulukkoon taulukon alkuun/yläosaan JavaScriptin avulla. Voit tehdä tämän määrittämällä funktion ' addRow() ”, jota kutsutaan painikkeen onclick()-tapahtumassa. Hae sitten luotu taulukko käyttämällä ' getElementById() ”menetelmä. Soita sen jälkeen ' insertRow() ' -menetelmä ohittamalla ' 0 ”-indeksi parametrina, joka osoittaa, että rivi lisätään taulukon alkuun.

Kutsu sitten ' insertCell() ” -menetelmää välittämällä indeksit, jotka osoittavat kuinka monta solua riville lisätään. Lisää lopuksi tekstidata tai teksti soluihin käyttämällä ' innerHTML ”omaisuus:

functionaddRow ( ) {
var tableRow = asiakirja. getElementById ( 'pöytä' ) ;
oli rivi = taulukkoRivi. insertRow ( 0 ) ;
missä solu1 = rivi. insertCell ( 0 ) ;
missä solu2 = rivi. insertCell ( 1 ) ;
missä solu3 = rivi. insertCell ( kaksi ) ;
solu1. innerHTML = 'Uuden rivin solu' ;
solu2. innerHTML = 'Uuden rivin solu' ;
solu3. innerHTML = 'Uuden rivin solu' ;
}

Kuten tulosteesta näkyy, uusi rivi lisätään olemassa olevan taulukon yläosaan napsauttamalla painiketta:

Esimerkki 2: Rivin lisääminen taulukon loppuun

Jos haluat lisätä rivin taulukon viimeiseen/päähän, välitä ' -1 ' hakemisto ' insertRow() ”menetelmä. Se lisää rivin viimein, kun painiketta napsautetaan:

functionaddRow ( ) {
var tableRow = asiakirja. getElementById ( 'pöytä' ) ;
oli rivi = taulukkoRivi. insertRow ( - 1 ) ;
missä solu1 = rivi. insertCell ( 0 ) ;
missä solu2 = rivi. insertCell ( 1 ) ;
missä solu3 = rivi. insertCell ( kaksi ) ;
solu1. innerHTML = 'Uuden rivin solu' ;
solu2. innerHTML = 'Uuden rivin solu' ;
solu3. innerHTML = 'Uuden rivin solu' ;
}

Lähtö

Siirrytään toiseen tapaan!

Tapa 2: Lisää rivi HTML-taulukkoon luomalla uusi elementti

On olemassa toinen tapa lisätä rivi taulukkoon, joka luo uusia elementtejä JavaScript-menetelmillä, mukaan lukien ' createElement() 'menetelmä ja' appendChild() ”menetelmä. CreateElement() luo - ja -elementit ja appendChild()-metodi lisää solut ja rivit taulukkoon.

Syntaksi

Noudata annettua syntaksia luodaksesi uuden elementin rivin lisäämistä varten taulukkoon JavaScriptin avulla:

asiakirja. CreateElement ( 'tr' ) ;

Täällä ' tr ”on taulukon rivi.

Esimerkki

Käytämme nyt samaa aiemmin luotua taulukkoa HTML:ssä CSS-tiedoston kanssa, mutta JavaScript-tiedostossa käytämme ' createElement() ”menetelmä. Lisää sitten tiedot tai teksti soluihin käyttämällä ' innerHTML ” omaisuutta. Lopuksi kutsu ' appendChild() ' -menetelmä, joka lisää solut riviin ja sitten rivin taulukkoon:

functionaddRow ( ) {
var tableRow = asiakirja. getElementById ( 'pöytä' ) ;
oli rivi = asiakirja. CreateElement ( 'tr' ) ;
missä solu1 = asiakirja. CreateElement ( 'td' ) ;
missä solu2 = asiakirja. CreateElement ( 'td' ) ;
missä solu3 = asiakirja. CreateElement ( 'td' ) ;
solu1. innerHTML = 'Uuden rivin solu' ;
solu2. innerHTML = 'Uuden rivin solu' ;
solu3. innerHTML = 'Uuden rivin solu' ;
rivi. liitä lapsi ( solu1 ) ;
rivi. liitä lapsi ( solu2 ) ;
rivi. liitä lapsi ( solu3 ) ;
taulukkoRivi. liitä lapsi ( rivi ) ;
}

Tulos näyttää, että uusi rivi on lisätty onnistuneesti taulukon loppuun:

Olemme koonneet kaikki menetelmät rivin lisäämiseksi taulukkoon JavaScriptin avulla.

Johtopäätös

Voit lisätä rivin taulukkoon käyttämällä kahta tapaa: insertRow()-menetelmää tai luoda uuden elementin JavaScriptin ennalta määritetyillä menetelmillä, mukaan lukien appendChild()-metodi ja createElement()-metodi. Voit lisätä rivin taulukon loppuun käyttämällä insertRow()-menetelmää välittämällä indeksit. Tässä oppaassa selitettiin uuden rivin lisääminen taulukkoon napsauttamalla JavaScript-painiketta.

Kuinka lisätä rivi HTML-taulukkoon JavaScriptin avulla