Avatar billede sbay Nybegynder
09. oktober 2006 - 16:17 Der er 21 kommentarer og
1 løsning

Grid til tekstinput

Hejsa

Jeg skal bruge en eller anden form for dynamisk grid til indtastning af data på en hjemmeside. Jeg har fem kolonner med data og et forskelligt antal linier. Det svinger fra 1 til 15 linier, så jeg synes det ser lidt tosset ud med 14 tomme tekstbokse! Kan man få en komponent der tilføjer en ny linie, når den foregående er udfyldt? Java-Script eller????

PS. Jeg skal have suget data ud af hver linie, og linien skal således deles op i de 5 kolonner. Variablerne skal herefter overføres til en database!

I bund og grund ville en lille form for Excel regneark være fint :-)
Avatar billede olebole Juniormester
10. oktober 2006 - 12:00 #1
<ole>

Det kræver, man kan se din kode - og ved, hvordan den skal bruges  =)

/mvh
</bole>
Avatar billede sbay Nybegynder
10. oktober 2006 - 12:44 #2
Min kode? Jeg eksperimentere kun lige nu. Men se her hvad jeg mener:

http://www.flyingfish.dk/test.htm
Avatar billede olebole Juniormester
10. oktober 2006 - 14:12 #3
Jeg bliver nødt til at vide præcist, hvad du skal bruge - og hvordan det skal bruges  =)
Avatar billede sbay Nybegynder
10. oktober 2006 - 15:01 #4
Jeg skal bruge en matriks, med 5 kolonner og op til 15 linier. I hvert felt af denne matriks skal der være en tekstboks. Det skal være muligt at indlæse en værdi fra en database i hvert felt, samt hvis de bliver rettet, at gemme dem i en database igen.

Denne her er smart, men virker bare lidt som overkill!

http://www.senzalimiti.sk/slgrid/pages/en/demo.html
Avatar billede olebole Juniormester
10. oktober 2006 - 15:54 #5
Jeg er på vej ud af døren, så det bliver først engang imorgen - og måske først torsdag, jeg får kikket på spm'et.

Sagen er, at lige på dette punkt er IE's DOM-lag noget møj - selvom det ikke generelt er i ruiner, som FF's er. Derfor kan man ikke lige lave den hurtige løsning, man 'i følge bogen' burde kunne  :o|
Avatar billede roenving Novice
15. oktober 2006 - 12:27 #6
Er det måske noget sådant, du ønsker: http://exp.dk/spm/666830, http://exp.dk/spm/672130 ?-)
Avatar billede sbay Nybegynder
15. oktober 2006 - 19:33 #7
roenving> det ser meget interessant. Vil i morgen se om jeg kan få det indpasset i mit setup! Men jeg kan ikke umiddelbart gennemskue, hvorledes jeg udvider den til at have 5 felter i hver række?
Avatar billede roenving Novice
15. oktober 2006 - 23:09 #8
Da udgangspunktet er en kloning af rækker, indsætter du simpelthen dine ekstra felter i den første række !-)
Avatar billede olebole Juniormester
16. oktober 2006 - 09:21 #9
Ooooops .... her er da vist et spm, jeg har glemt - sorry  =)
Avatar billede sbay Nybegynder
16. oktober 2006 - 15:17 #10
Det er jo vældig smart!

Men hvis jeg nu har noget data fra en MySQL database jeg gerne vil fylde i felterne, lad os antage der er 4 rækker - hvorledes gør man det? Og hvad kommer felterne til at hedde bagefter, nar man skal suge data ud af dem for at lagre det i databasen igen?
Avatar billede roenving Novice
16. oktober 2006 - 16:06 #11
Et hurtigt forsøg:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tilføj række i form/tabel</title>
<meta name="keywords" content="roenving,http://exp.dk/spm/666830">
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function addRow(elm){
  var tb = getParent(elm,"tbody");
  var tr = tb.getElementsByTagName("tr")[0];
  var nyTr = tr.cloneNode(true);
  var inps = nyTr.getElementsByTagName("input");
  for(i=0;inps.length>i;i++){
    if(inps[i].type == "text")
      inps[i].value = "";
  }
  var submitRow = getParent(elm, "tr");
  tb.insertBefore(nyTr,submitRow);
}
function deleteRow(elm){
  var tb = getParent(elm,"tbody");
  var trs = tb.getElementsByTagName("tr");
  if(3>trs.length)
    return;
  for(i=trs.length-2;i>0;i--){
    if(trs[i].getElementsByTagName("input")[6].checked)
      tb.removeChild(trs[i]);
  }
}
function getParent(elm,TagName){
  var parElm = elm.parentNode;
  while(parElm.tagName.toLowerCase() != TagName.toLowerCase())
    parElm = parElm.parentNode;
  return parElm;
}
</script>
</head>
<body>
<form action="" method="post" name="myForm">

<table width="400" border="1">
  <tr>
    <td><input name="firstname[]" type="text"></td>
    <td><input name="lastname[]" type="text"></td>
    <td><input name="address[]" type="text"></td>
    <td><input name="zip[]" type="text"></td>
    <td><input name="city[]" type="text"></td>
    <td>Slet: <input name="slet" type="checkbox" value="delete"></td>
  </tr>
  <tr>
    <td><input name="addfield" type="button" value="Udvid form" onclick="addRow(this);return false;"><br>
    <input name="deletefield" type="button" value="Slet markeret række" onclick="deleteRow(this);return false;"></td>
    <td><input name="submit" type="submit" value="OK"></td>
    <td></td>
  </tr>
</table>
</form>

</body>
</html>

-- på den måde vil de blive til et array af inputs, f.eks. hvis du bruger PHP !-)

-- og hvis du vil have data i f.eks. 4 rækker, så indskriver du blot data i 4 rækker, det skulle den sagtens kunne overleve ...

-- men det er absolut utestet !o]
Avatar billede sbay Nybegynder
17. oktober 2006 - 12:30 #12
Det virker! Bortset fra at jeg ikke kan slette rækker!?

Min kode:

<?php
      $i = 0;
    While ($i < $counter ) {
    echo "<tr>";
    echo "<td bgcolor='#FFFFCC'><input name='firstname[$i]' value='$firstname[$i]' type='text'></td>";
    echo "<td bgcolor='#FFFFCC'><input name='lastname[$i]' value='$lastname[$i]' type='text'></td>";
    echo "<td bgcolor='#FFFFCC'><input name='address[$i]' value='$address[$i]' type='text'></td>";
    echo "<td bgcolor='#FFFFCC'><input name='zip[$i]' value='$zip[$i]' type='text'></td>";
    echo "<td bgcolor='#FFFFCC'><input name='city[$i]' value='$city[$i]' type='text'></td>";
    echo "<td>Slet: <input name='slet' type='checkbox' value='delete'></td>";   
    $i = $i +1;   
    echo "</tr>";
    }
?>
Avatar billede roenving Novice
17. oktober 2006 - 17:03 #13
-- prøv med: .getElementsByTagName("input")[5].
Avatar billede sbay Nybegynder
19. oktober 2006 - 15:19 #14
Så er den lige ved at være der - kun et spørgsmål mere! Når jeg trykker på ADD Row kommer der en linie mere, men den består af kolonneoverskrifterne  - ikke felter!!

<table width="400" border="0">
    <tr>
                            <td><font class="pointfont">Cliche</font></td>
                            <td><font class="pointfont">Ink no.</font></td>
                            <td><font class="pointfont">Ink text</font></td>
                            <td><font class="pointfont">Cliche text</font></td>
                            <td><font class="pointfont">Date</font></td>
                            <td><font class="pointfont">Deletion</td>
                        </tr>
                       
<?php
      $i = 0;
    While ($i < $counter ) {
    echo "<tr>";
    echo "<td bgcolor=''><input name='BCHLDK[$i]' value='$BCHLDK[$i]' type='text' size='12'></td>";
    echo "<td bgcolor=''><input name='BCHLDF[$i]' value='$BCHLDF[$i]' type='text' size='12'></td>";
    echo "<td bgcolor=''><input name='IDESCF[$i]' value='$IDESCF[$i]' type='text' size='34'></td>";
    echo "<td bgcolor=''><input name='IDESCK[$i]' value='$IDESCK[$i]' type='text' size='16'></td>";
    echo "<td bgcolor=''><input name='IMENDT[$i]' value='$IMENDT[$i]' type='text' size='12'></td>";
    echo "<td><input name='slet' type='checkbox' value='delete'></td>";   
    $i = $i +1;   
    echo "</tr>";
    }
?>

  <tr>
    <td>
    <input name="addfield" type="button" value="Add row" onclick="addRow(this);return false;"><br>
    &nbsp;</td>
Avatar billede roenving Novice
19. oktober 2006 - 23:52 #15
Prøv:

...
function addRow(elm){
  var tb = getParent(elm,"tbody");
  var tr = tb.getElementsByTagName("tr")[1];
...
Avatar billede sbay Nybegynder
20. oktober 2006 - 08:30 #16
Så virker det bare perle! Smid et svar!
Avatar billede roenving Novice
20. oktober 2006 - 14:08 #17
Velbekomme '-)
Avatar billede sbay Nybegynder
20. oktober 2006 - 14:15 #18
Undrer mig så bare over hvilket navn felterne i en tilføjet række får!!!!
Avatar billede roenving Novice
21. oktober 2006 - 00:50 #19
Check lige koden (Vis kode i browseren !-), så må vi kigge på det !o]
Avatar billede sbay Nybegynder
23. oktober 2006 - 09:47 #20
Her er koden, med en 6. tom række tilføjet!:
<table width="400" border="0">
    <tr>

                            <td><font class="pointfont">Cliche</font></td>
                            <td><font class="pointfont">Ink no.</font></td>
                            <td><font class="pointfont">Ink text</font></td>
                            <td><font class="pointfont">Cliche text</font></td>
                            <td><font class="pointfont">Date</font></td>
                            <td><font class="pointfont">Deletion</td>

                        </tr>
                       
<tr><td><input name='BCHLDK[0]' value='KL009038      ' type='text' size='12'></td><td><input name='BCHLDF[0]' value='O94001        ' type='text' size='12'></td><td><input name='IDESCF[0]' value='PMS PROCESS BLACK            ' type='text' size='34'></td><td><input name='IDESCK[0]' value='PLADER                        ' type='text' size='16'></td><td><input name='IMENDT[0]' value='20060119' type='text' size='12'></td><td><input name='slet' type='checkbox' value='delete'></td></tr><tr><td><input name='BCHLDK[1]' value='KL002736      ' type='text' size='12'></td><td><input name='BCHLDF[1]' value='O93001        ' type='text' size='12'></td><td><input name='IDESCF[1]' value='PMS PROCESS CYAN              ' type='text' size='34'></td><td><input name='IDESCK[1]' value='PLADER                        ' type='text' size='16'></td><td><input name='IMENDT[1]' value='20020724' type='text' size='12'></td><td><input name='slet' type='checkbox' value='delete'></td></tr><tr><td><input name='BCHLDK[2]' value='KL002737      ' type='text' size='12'></td><td><input name='BCHLDF[2]' value='O92001        ' type='text' size='12'></td><td><input name='IDESCF[2]' value='PMS PROCESS MAGENTA          ' type='text' size='34'></td><td><input name='IDESCK[2]' value='PLADER                        ' type='text' size='16'></td><td><input name='IMENDT[2]' value='20020724' type='text' size='12'></td><td><input name='slet' type='checkbox' value='delete'></td></tr><tr><td><input name='BCHLDK[3]' value='KL002738      ' type='text' size='12'></td><td><input name='BCHLDF[3]' value='O91001        ' type='text' size='12'></td><td><input name='IDESCF[3]' value='PMS PROCESS YELLOW            ' type='text' size='34'></td><td><input name='IDESCK[3]' value='PLADER                        ' type='text' size='16'></td><td><input name='IMENDT[3]' value='20020724' type='text' size='12'></td><td><input name='slet' type='checkbox' value='delete'></td></tr><tr><td><input name='BCHLDK[4]' value='KL003499      ' type='text' size='12'></td><td><input name='BCHLDF[4]' value='O93101        ' type='text' size='12'></td><td><input name='IDESCF[4]' value='PMS REFLEX BLUE              ' type='text' size='34'></td><td><input name='IDESCK[4]' value='PLADER                        ' type='text' size='16'></td><td><input name='IMENDT[4]' value='20030206' type='text' size='12'></td><td><input name='slet' type='checkbox' value='delete'></td></tr>
  <tr>
    <td>
    <input name="addfield" type="button" value="Add row" onclick="addRow(this);return false;"><br>
    &nbsp;</td>
    <td valign="top">
    <input name="deletefield" type="button" value="Delete row" onclick="deleteRow(this);return false;"></td>
    <td valign="top">&nbsp;</td>

    <td></td>
    <td></td>
  </tr>
</table>
Avatar billede sbay Nybegynder
23. oktober 2006 - 10:19 #21
Damn, det står ikke pænt....
Avatar billede sbay Nybegynder
04. juli 2007 - 14:39 #22
Opfølgende spørgsmål: http://www.eksperten.dk/spm/786218
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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