Hvordan Fyll en tabell celle med Javascript

May 16

Manipulere HTML-tabeller krever Javascript. HTML Document Object Model, eller DOM, gir utviklere muligheten til å bruke Javascript for å endre "innerhtml" tilhører et element på en webside inkludert tabellceller. Innerhtml eiendom genererer innholdet du ser på en webside. Du kan endre en tabellcelle er innerhtml eiendom, for eksempel når en bruker klikker en "Show pris" knappen. Denne handlingen vil føre til en pris å vises i cellen. Når du forstår hvordan du bruker DOM å finne en celle, kan du fylle den med noen verdi umiddelbart.

Bruksanvisning

1 Åpne et HTML-dokument og lim inn følgende kode inn i dokumentet "body" -delen:

<Table id = "testTable1" border = 1>
<Tr>
<Td> ingen verdi </ td>
<Td> ingen verdi </ td>
</ Tr>

<Tr>
<Td> ingen verdi </ td>
<Td> ingen verdi </ td>
</ Tr>

</ Table>
<Input type = "button" value = "Fyll Cell" onclick = "return fillCell ( 'testTable1', '2', '1', 'Test Value')" />

Denne koden lager en ny tabell. Tabellen, som "id" er "testTable1" inneholder tre rader med to celler per rad. Knappen kaller en Javascript-funksjon som heter "fillCell." At funksjonen lokaliserer en celle og fyller det med verdien "Test Value" vedtatt i knapp klikk hendelsen.

2 Lim inn koden nedenfor i dokumentet er "script" seksjonen:

funksjon fillCell (bord, targetRow, targetCell, fillContents) {

Var tableObj = document.getElementById (tabell);
Var selectedRow = tableObj.rows [targetRow-1];

Var selectedCell = selectedRow.cells [targetCell-1];
selectedCell.innerHTML = fillContents;
}

Denne funksjonen mottar bordet ID, target rad og målcellen vedtatt av knapp klikk. Den mottar også at verdien du vil bruke til å fylle målcellen. Koden lokaliserer deretter den ønskede celle innenfor målet rad og setter dens innerhtml egenskapen til den som er lagret i den fillContents variabelverdien.

3 Lagre dokumentet og vise den i en nettleser. Klikk på knappen for å kjøre Javascript-funksjonen. Det finner den første cellen i den andre raden og fyller en celle med ordene "testverdien."

Hint

Fjern innholdet i en celle ved å sette verdien av cellContents til "" før du kaller fillCell funksjonen. Dette setter innerhtml verdien av målcellen til mellomrom.