Øke antall rader i en tabell dynamisk

[DJViking]

Jeg skal lage en tabell som har opprinnelig en rad, men skal kunne økes ved at brukeren trykker på en + knapp.

 

Jeg er ikke helt sikker hvordan jeg skal implementere en slik sak, om jeg må/bør bruke Javascript.

 

Noen som vet om noe eksempelkode som tar for seg et slikt oppsett? Har prøvd å google, men finner ikke noe som går inn på mitt problem.

 

Inni raden har jeg noen <input> i en formular. Denne input har et navn som også bør kunne justeres etter hvilken rad det er. name="navn01"

 

<script type="text/javascript">
var id = 1;

function getRowCount(){ return id; }

function increaseTable(){

}
</script>

<table>
 <tr>
   <form onclick="increaseTable();>
     <input type="submit" value="+">
   </form>
 </tr>
 <tr>
   <td>
     <input type="text" name="kundereferanse+getRowCount();">
   </td>
 </tr>
</table>

 

Den siste raden skal kunne økes ved å trykke på knappen

Endret 14. august 2007 av DJViking

[PHPdude]

http://developer.mozilla.org/en/docs/DOM

[DJViking]

Det var ikke mye til hjelp.

[Ståle]

Jeg kan ikke JS ordentlig, men prover meg

 

function increaseTable(){

 

document.write('<tr>

<td>

<input type="text" name="kundereferanse">

</td>

</tr>');

}

 

nar alle input-elementene har samme navn. Blir de lagret i et array, sa du kan hente dem ut med

 

foreach ($_POST['kundereferanse'] as $kundereferanse)

{

}

[PHPdude]

Kort fortalt er DOM (Document Object Model) en standardisert måte å modifisere XML/HTML fra et programmeringsspråk. Et "must" å kunne for alle som driver med webutvikling.

 

Eksempel1:

function increaseTable(id) {
 var table = document.getElementById(id);
 var newRow = table.insertRow(-1);
 var newCell = newRow.insertCell(0);
 var input = document.createElement('input');
 input.setAttribute('name', 'kundereferanse');
 newCell.appendChild(input);
}

 

Eksempel 2: Sparer antall linjer ved å klone den eksisterende raden istendefor å måtte definere både raden og innholdet på nytt. Også praktisk viss du senere skal endre raden.

function increaseTable(id) {
 var table = document.getElementById(id);
 var newRow = table.rows[0].cloneNode(true);
 var table.appendChild(newRow);
}

 

For å teste koden må du først sette en ID på <table>, så kan du kjøre increaseTable('myTableId');

 

PS: Koden er ikke testet og kan trenge endringer for å fungere...

 

http://www.google.no/search?q=javascript+dom

http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

[DJViking]

Fant et godt eksempel her

 

Det er vel noe av det som PHPDude gikk igjennom

Endret 21. august 2007 av DJViking