Notifikationer

Markér alle som læst Log ud

elskermad.dk Nybegynder

30. oktober 2005 - 22:06 Der er 18 kommentarer og
1 løsning

indsætte række i tabel via javascript

Hej Eksperter!

Jeg har forsøgt mig lidt med noget kode jeg har fundet på eksperten men jeg kan ikke få det til at virke som jeg gerne vil have det...

Jeg har en tabel hvor jeg gerne vil kunne indsætte nogle rækker med forskellig indhold når siden er indlæst via javascript!

Min html til tabellen ser sådan her ud:

<table id='indhold' width='100%' align='center' cellpadding='3' cellspacing='0'>
<tr align='left' valign='top' style='font-weight:bold'>
<td width='15%' style='border-bottom:1px solid #EAEAEA'>varenr.</td>
<td style='border-bottom:1px solid #EAEAEA'>beskrivelse</td>
<td width='15%' style='border-bottom:1px solid #EAEAEA'>pris</td>
</tr>
<tr id='row_1' align='left' valign='top'>
<td><input type='text' name='varenr_1' style='width:95%' class='nobg'></td>
<td><input type='text' name='tekst_1' style='width:98%' class='nobg'></td>
<td><input type='text' name='pris_1' style='width:95%' class='nobg'></td>
</tr>
</table>

Jeg vil så gerne at man kunne indsætte nederste række igen ved et tryk på en knap, men så værdierne nu ikke er 1, men 2, og så 3 hvis der var indsat en 2'er...

Altså næste række skal se sådan her ud:

<tr id='row_2' align='left' valign='top'>
<td><input type='text' name='varenr_2' style='width:95%' class='nobg'></td>
<td><input type='text' name='tekst_2' style='width:98%' class='nobg'></td>
<td><input type='text' name='pris_2' style='width:95%' class='nobg'></td>
</tr>

Hvordan gøres det?

På forhånd tak! :)

Synes godt om

roenving Novice

30. oktober 2005 - 22:13 #1

Hvor mange rækker vil du gøre tilgængelige ?-)

-- for den simple løsning hedder indsæt allesammen, men skjul dem, der ikke er behov for !-)

-- hvis det er nødvendigt, at det skal være dynamisk skal vi lige lege lidt voldsomt med noget DOM-kloning !o]

Synes godt om

elskermad.dk Nybegynder

30. oktober 2005 - 22:14 #2

jeg kan ikke sige det præcist, men nok max 20... for min skyld kan de godt blot være skjult hvis det kan lade sig gøre indtil de skal bruges :) men igen, så skal det være med en knap hvor man henter en række frem

Synes godt om

elskermad.dk Nybegynder

30. oktober 2005 - 22:15 #3

gøres DOM-kloningen lettere hvis man i stedet gør det til arrays - altså name='varenr[]' ? så må de gerne være ens...

Synes godt om

roenving Novice

30. oktober 2005 - 22:23 #4

Naeh, det er det voldsomt store forskel, men der spares selvfølgelig et par linjers javascript, men det giver ingen alvorlig forskel ...

<table id='indhold' width='100%' align='center' cellpadding='3' cellspacing='0'>
<tr align='left' valign='top' style='font-weight:bold'>
<td width='15%' style='border-bottom:1px solid #EAEAEA'>varenr.</td>
<td style='border-bottom:1px solid #EAEAEA'>beskrivelse</td>
<td width='15%' style='border-bottom:1px solid #EAEAEA'>pris</td>
</tr>
<tr id='row_1' align='left' valign='top'>
<td><input type='text' name='varenr_1' style='width:95%' class='nobg'></td>
<td><input type='text' name='tekst_1' style='width:98%' class='nobg'></td>
<td><input type='text' name='pris_1' style='width:95%' class='nobg'></td>
</tr>
<tr id='row_2' align='left' valign='top' style='display:none;'>
<td><input type='text' name='varenr_2' style='width:95%' class='nobg'></td>
<td><input type='text' name='tekst_2' style='width:98%' class='nobg'></td>
<td><input type='text' name='pris_2' style='width:95%' class='nobg'></td>
</tr>
</table>

<button onclick="visNyRaekke();return false;">Ny række</button>

<script type="text/javascript">
var actRow = 1, r;
var ie = document.all && navigator.userAgent.toLowerCase().indexOf("opera") == -1;
function visNyRaekke(){
if(actRow < 20){//Højst 20 rækker ialt !-)
document.getElementById("row_" + (++actRow)).style.display = ie ? 'block' : table-row';
}
}
</script>

-- desværre forstår ie ikke endnu table-row-propertyen, hvorfor browser-detecting er nødvendig med den simple metode ...

-- det tager lige et par minutter at lave et eksempel på kloningen !-)

Synes godt om

roenving Novice

30. oktober 2005 - 22:24 #5

... det er IKKE den voldsomt store ...

Synes godt om

roenving Novice

30. oktober 2005 - 22:34 #6

For eksempel virker denne i alle mine browsere:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
<script language="javascript" type="text/javascript">
var actRow = 1;
function tilfoejRække(){
var tabel = document.getElementById('indholdBody');
var raekke = document.getElementById('row_1').cloneNode(true);
raekke.id = raekke.id.replace(/_1/,"_" + (++actRow));
inps = raekke.getElementsByTagName('input');
for(i=0;inps.length>i;i++){
inps[i].name = inps[i].name.replace(/_1/,"_" + actRow);
}
tabel.appendChild(raekke);
}
</script>
</head>

<body>
<table id='indhold' width='100%' align='center' cellpadding='3' cellspacing='0'>
<tbody id="indholdBody">
<tr align='left' valign='top' style='font-weight:bold'>
<td width='15%' style='border-bottom:1px solid #EAEAEA'>varenr.</td>
<td style='border-bottom:1px solid #EAEAEA'>beskrivelse</td>
<td width='15%' style='border-bottom:1px solid #EAEAEA'>pris</td>
</tr>
<tr id='row_1' align='left' valign='top'>
<td><input type='text' name='varenr_1' style='width:95%' class='nobg'></td>
<td><input type='text' name='tekst_1' style='width:98%' class='nobg'></td>
<td><input type='text' name='pris_1' style='width:95%' class='nobg'></td>
</tr>
</tbody>
</table>
<button onclick="tilfoejRække();return false;">Tilføj række</button>
</body>

</html>

Synes godt om

elskermad.dk Nybegynder

30. oktober 2005 - 22:35 #7

kigger lige på det :)

Synes godt om

roenving Novice

30. oktober 2005 - 22:37 #8

Hrm, det var zq underligt, der var ikke fejl på brugen af æ'et, men udskift det alligevel i tilfoejRaekke !-)

Synes godt om

olebole Juniormester

31. oktober 2005 - 00:56 #9

<ole>

Hehe ... jamen, til gengæld er der nok ikke meget andet, der virker ;o)
Som vi før er blevet enige om, kan IE ikke håndtere name-attributter på bl.a. input-elementer:

<form>
<input type="text" name="foo">
</form>

<button onclick="document.getElementsByName('foo')[0].name='bar';alert(document.body.innerHTML)">IE Stinker!</button>

/mvh
</bole>

Synes godt om

olebole Juniormester

31. oktober 2005 - 00:57 #10

- og det ændres ikke ved, du forsøger med 'setAttribute' :o|

Synes godt om

roenving Novice

31. oktober 2005 - 01:01 #11

-- men hvis jeg indsætter en alert på input.name i ovenstående kode virker det helt fint, men hvis jeg gennemkigger den genererede kode har IE jo så ikke ændret name ,-(

Synes godt om

mercutio Nybegynder

01. november 2005 - 13:16 #12

Hvis man nu på hver række vil have en knap som kan slette rækken igen hvad skal scriptet på den så være? Står lige og skal bruge noget i samme stil som det her.

Synes godt om

roenving Novice

01. november 2005 - 14:54 #13

Hvis du sætter den inde i rækken, kan du bruge følgende:

<script type="text/javascript">
function removeRow(elm){
var par = elm.parentNode;
while(par.tagName != 'tr')
par = par.parentNode;
par.style.display = 'none';
}
</script>

-- og

<tr>
...
<td>
<button onclick="removeRow(this;return false;">Fjern række</button></td>
</tr>

Synes godt om

mercutio Nybegynder

01. november 2005 - 15:00 #14

Gør det ikke bare at rækken bliver skjult? så bliver den vel stadig submittet? det vil jeg helst undgå hvis man kan.

Synes godt om

roenving Novice

01. november 2005 - 15:08 #15

Tjoh, du kan da også fjerne kalorius helt:

<script type="text/javascript">
function removeRow(elm){
var par = elm.parentNode;
while(par.tagName != 'tr')
par = par.parentNode;
par.parentNode.removeChild(par);
}
</script>

-- og hvis du vil beholde muligheden for at genindsætte rækken, kan du opbevare den i en variabel:

oldRow = par.parentNode.removeChild(par);

Synes godt om

mercutio Nybegynder

01. november 2005 - 15:15 #16

Jamen jeg takker tilføjede lige
while(par.tagName != 'tr'&&par.tagName != 'TR')
så spiller det bare.

Synes godt om

elskermad.dk Nybegynder

01. november 2005 - 15:19 #17

så burde vi næsten dele udgifterne af point ;)

ej... kom med nogle svar så vi kan få lukket her!

Synes godt om

roenving Novice

01. november 2005 - 15:22 #18

Hvis der er problemer med case, ville jeg:

while(par.tagName.toLowerCase() != 'tr')

-- els velbekomme '-)

Synes godt om

roenving Novice

01. november 2005 - 15:30 #19

-- og tak for point ;~}

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS