[javascript] exra rijen toevoegen - Softwareontwikkeling

vrijdag 9 september 2005 23:10

Acties:

Topicstarter

Ik ben wat aan het knutselen met een formulier maar kom er op dit moment even niet uit.
Wat ik namelijk wil is dat er 2 rijen worden toegevoegd als ik op een knop klik met "rijen toevoegen" tevens moeten deze velden als ze worden toegevoegd niet dezelfde id krijgen anders werkt namelijk het label niet meer.

Ik hoop dat iemand hier toevallig een site weet waar ik eventueel het scriptje zou kunnen vinden of mij een beetje op weg zou willen helpen want van javascript weet ik helaas niet al teveel af.

HTML:

<table>
  <tr>
    <td><label for="voornaam1">Vooraam</label></td>
    <td><input type="text" name="voornaam" id="voornaam1" value="voornaam" /></td>
  </tr>
  <tr>
    <td><label for="achternaam1">Achternaam</label></td>
    <td><input type="text" name="achternaam" id="achternaam1" value="achternaam" /></td>
  </tr>
</table>

vrijdag 9 september 2005 23:14

Acties:

Verwijderd

//edit ok hier stond wat anders, maar hier de definitieve (werkende) code:

HTML:

<html>
  <head>
    <script type="text/javascript">

//  creates an input element with name and id 'str_name'    
function get_input_cell(str_name) {
  var obj_element = document.createElement('input');
  obj_element.setAttribute('className', 'text');
  obj_element.setAttribute('type', 'text');
  obj_element.setAttribute('name', str_name);
  obj_element.setAttribute('id', str_name);  
  return obj_element;
}

// creates a label for an input element
function get_caption_cell(str_target, str_caption) {
  var obj_element = document.createElement('label');
  obj_element.innerHTML="<label for=\"" + str_target + "\">" + str_caption + "</label";
  return obj_element;
}

function add_table_row() { 
  // keep rowcount to create unique id's for input elements
  var int_rowcount = document.getElementById('rowcount').value;
  int_rowcount++;
  document.getElementById('rowcount').value = int_rowcount;
  // get table
  var obj_table = document.getElementById('my_table');
  // insert first row (voornaam)
  var obj_row = obj_table.insertRow(obj_table.rows.length);
  // insert row cells
  var obj_voornaam_caption_cell = obj_row.insertCell(0);
  var obj_voornaam_input_cell = obj_row.insertCell(1);
  // insert second row (achternaam)
  var obj_row = obj_table.insertRow(obj_table.rows.length);
  // insert row cells
  var obj_achternaam_caption_cell = obj_row.insertCell(0);
  var obj_achternaam_input_cell = obj_row.insertCell(1);   
  // fill all cells with inputs and labels
  obj_voornaam_caption_cell.appendChild(get_caption_cell('voornaam' + int_rowcount,'Voornaam'));
  obj_voornaam_input_cell.appendChild(get_input_cell('voornaam' + int_rowcount));
  obj_achternaam_caption_cell.appendChild(get_caption_cell('achternaam' + int_rowcount,'Achternaam'));
  obj_achternaam_input_cell.appendChild(get_input_cell('achternaam' + int_rowcount));
}
   </script>
 </head>
 <body>
    <input type="hidden" id="rowcount" value="1">
    <table id="my_table">
      <tr>
        <td><label for="voornaam1">Voornaam</label></td>
        <td><input type="text" name="voornaam" id="voornaam1" value="voornaam" /></td>
      </tr>
      <tr>
        <td><label for="achternaam1">Achternaam</label></td>
        <td><input type="text" name="achternaam" id="achternaam1" value="achternaam" /></td>
      </tr>
    </table>
    <a href="javascript:void(0)" onclick="add_table_row()">Voeg rij toe</a>
  </body>
</html>

//edit 100.000: nog wat commentaar toegevoegd, zodat je misschien beter ziet wat ik doe..

[ Voor 255% gewijzigd door Verwijderd op 09-09-2005 23:47 ]

vrijdag 9 september 2005 23:49

Acties:

IschaGast

Topicstarter

Je bent mijn held van de dag!

Maar klein vraagje... ik wil het graag begrijpen maar is allemaal een beetje abacadabra voor mij. Zou je een kleine toelichting willen geven hoe je het precies gedaan hebt dan kan ik in de toekomst misschien de javascript codes iets beter begrijpen.

Want hoe doe je het dan hij 2 rows kopieert inplaats van wat je meestal tegenkomt 1?
En waar zitten nou de trucjes van dit script, hij is echt top!

Hoe kan ik bijvoorbeeld nog een rij toevoegen en dat hij deze ook mee kopieert of er juist 1 afhalen?

[ Voor 37% gewijzigd door IschaGast op 10-09-2005 00:11 ]

vrijdag 9 september 2005 23:54

Acties:

Verwijderd

Er is niet echt een truukje aan ofzo.. het is eigenlijk vrij eenvoudig.

Je geeft iets een id, dan kun je het met javascript ophalen met getElementById.

Als ik bv. doe:

code:

1	<table id="hallo">

dan kan ik in javascript doen:

code:

1	var obj_tabel = getElementById('hallo');

en dan kan ik dingen met die tabel gaan doen.

Een rij toevoegen een het einde van de tabel, doe je dan bv. zo:

code:

1	var obj_row = obj_table.insertRow(obj_table.rows.length);

maar dan heb je dus nog een lege row, daar wil je nog cellen (rijen) in hebben, in jouw geval 2, dus maak je 2 cellen aan:

code:

1 2	var obj_achternaam_caption_cell = obj_row.insertCell(0); var obj_achternaam_input_cell = obj_row.insertCell(1);

Nu heb je nog niets, want die cellen zijn nog leeg. Je wil in 1 cell een label hebben, en in de andere een input element. Ik heb daar even aparte functies van gemaakt, omdat je ze meerdere keren wil gebruiken, en ik niet van dubbel typewerk houdt. In de functies get_input_cell en get_caption_cell zie je hoe je een element aanmaakt.

bv. een input element maak je met:

code:

 var obj_element = document.createElement('input');
  obj_element.setAttribute('className', 'text');
  obj_element.setAttribute('type', 'text');
  obj_element.setAttribute('name', "naam van de input");
  obj_element.setAttribute('id', "id van de input";

Dan heb je een input aangemaakt, maar die wil je nog in een cell hebben. Dus append je 'm:

code:

1	obj_voornaam_caption_cell.appendChild(obj_element).

Dat is alles.

//edit

nog een row aanmaken --> nog een keer op de knop klikken

Een rij verwijderen kan met 'deleteRow', dus als ik bv. de 3e rij van de tabel wil verwijderen:

code:

1	obj_tabel.deleteRow(3);

Zaken overnemen uit voorgaande cellen kan door de waardes hiervan met getElementById op te halen (of via je form, als ze op een form staan) en dan in je nieuwe element te zetten. Voorbeeld:

code:

1 2	str_previous_input_content = document.getElementById('voornaam1').value; obj_element.setAttribute(value,str_previous_input_content);

[ Voor 28% gewijzigd door Verwijderd op 09-09-2005 23:58 ]

zaterdag 10 september 2005 00:13

Acties:

IschaGast

Topicstarter

Een nieuwe rij invoegen met label en inputveld dat lukt maar nu probeer ik een rij toe te voegen zoals deze en dan lukt het toch net weer even niet.

<tr>
<td colspan="2"></td>
</tr>

Dit is echt het laatste.

zaterdag 10 september 2005 00:17

Acties:

Verwijderd

Geen probleem hoor

code:

1 2	var obj_cell = obj_row.insertCell(0); obj_cell.colspan=2;

zaterdag 10 september 2005 00:33

Acties:

IschaGast

Topicstarter

Nah vooruit dan, als ik aan de td's ook nog een class wil hangen zoals dit:
<td colspan="2" class="spacer"></td>

Heb geprobeerd
obj_cell.colspan=2 class=spacer;
obj_cell.(colspan=2 + class=spacer);

Maar werkt allemaal niet. En als ik dan toch bezig ben met vragen, een goed javascript leersite of boek of iets dergelijks. Wat is een echte aanrader?

zaterdag 10 september 2005 00:42

Acties:

Verwijderd

IschaGast schreef op zaterdag 10 september 2005 @ 00:33:
Nah vooruit dan, als ik aan de td's ook nog een class wil hangen zoals dit:
<td colspan="2" class="spacer"></td>

code:

1	obj_cell.setAttribute('className', 'mijnclass');

Goede boeken kan ik je niet echt mee helpen, maar, niet lullig bedoeld, ik denk dat je in de FAQ hier best wel wat info kunt vinden.

En.. google is your friend. Voor het laatste vraagje had je bv. kunnen zoeken bij google op 'javascript insertcell set class' oid.

zaterdag 10 september 2005 00:45

Acties:

IschaGast

Topicstarter

Je hebt mij onwijs op weg geholpen, erg bedankt daarvoor. Ga er toch maar even iets vaker in rondneuzen allemaal.

zaterdag 10 september 2005 00:46

Acties:

Verwijderd

Geen probleem, daar zijn fora (ook) voor.. succes!

zaterdag 10 september 2005 00:52

Acties:

IschaGast

Topicstarter

Ik heb er nu dit van gemaakt dat schijnt ook te werken:
obj_cell.className="spacer";

maandag 12 september 2005 10:04

Acties:

IschaGast

Topicstarter

Nu probeer ik ook een class te hangen aan de andere inputvelden maar hij wilt gewoon niet.
Heb dit geproebeerd:

obj_achternaam_input_cell.setAttribute('className', 'txt'); & obj_achternaam_cell.setAttribute('className', 'txt'); &
obj_cell.setAttribute('className', 'txt');

Verder heb ik hier ngg geprobeerd de class erin te zetten:
var obj_element = document.createElement('input');
obj_element.setAttribute('className', 'txt'); & obj_element.setAttribute('className', 'str_name');

Maar allemaal willen ze niet

maandag 12 september 2005 10:22

Acties:

crisp

Devver

Pixelated

Voor standards-compliant browsers:

JavaScript:

1	document.getElementById('foo').setAttribute('class', 'bar');

Voor IE:

JavaScript:

1	document.getElementById('foo').setAttribute('className', 'bar');

Dit werkt altijd:

JavaScript:

1	document.getElementById('foo').className = 'bar';

Intentionally left blank

maandag 12 september 2005 10:52

Acties:

IschaGast

Topicstarter

edit:
Het werkt allemaal wel gewoon alleen door deze code te plaatsen

[code=javascript]
function get_input_cell(str_name) {
var obj_element = document.createElement('input');
obj_element.setAttribute('type', 'text');
obj_element.setAttribute('name', str_name);
obj_element.setAttribute('id', str_name);
obj_element.setAttribute('className', 'txt');
return obj_element;
}
[/code]

Alleen pakt hij het in Firefox niet maar dat is in de stylesheet wel op te lossen

Maar als ik dit script gebruik dan is de ID steeds anders want die loopt automatisch op zeg maar, is dit dan nog steeds de juiste methode?

Helemaal onderaan de code heb ik wel al dat ik een class aan mijn tr heb gehangen is zou haast zeggen dat de schrijfwijze voor een class aan de inputveld ongeveer hetzelfde moet zijn. Of zit ik er nu helemaal naast? Want ik had het zo gedaan volgende manier van crisp maar ik kreeg hem niet werkende.

HTML:

1
2
3

<tr class="spacer">
  <td></td>
</tr>

JavaScript:

    <script type="text/javascript">

//  creates an input element with name and id 'str_name'    
function get_input_cell(str_name) {
  var obj_element = document.createElement('input');
  obj_element.setAttribute('className', 'text');
  obj_element.setAttribute('type', 'text');
  obj_element.setAttribute('name', str_name);
  obj_element.setAttribute('id', str_name);  
  return obj_element;
}

// creates a label for an input element
function get_caption_cell(str_target, str_caption) {
  var obj_element = document.createElement('label');
  obj_element.innerHTML="<label for=\"" + str_target + "\">" + str_caption + "</label";
  return obj_element;
}

function add_table_row() { 
  // keep rowcount to create unique id's for input elements
  var int_rowcount = document.getElementById('rowcount').value;
  int_rowcount++;
  document.getElementById('rowcount').value = int_rowcount;
  // get table
  var obj_table = document.getElementById('my_table');
  // insert first row (voornaam)
  var obj_row = obj_table.insertRow(obj_table.rows.length);
  // insert row cells
  var obj_voornaam_caption_cell = obj_row.insertCell(0);
  var obj_voornaam_input_cell = obj_row.insertCell(1);
  // insert second row (achternaam)
  var obj_row = obj_table.insertRow(obj_table.rows.length);
  // insert row cells
  var obj_achternaam_caption_cell = obj_row.insertCell(0);
  var obj_achternaam_input_cell = obj_row.insertCell(1);   
  // fill all cells with inputs and labels
  obj_voornaam_caption_cell.appendChild(get_caption_cell('voornaam' + int_rowcount,'Voornaam'));
  obj_voornaam_input_cell.appendChild(get_input_cell('voornaam' + int_rowcount));
  obj_achternaam_caption_cell.appendChild(get_caption_cell('achternaam' + int_rowcount,'Achternaam'));
  obj_achternaam_input_cell.appendChild(get_input_cell('achternaam' + int_rowcount));
  obj_cell.setAttribute('className', 'spacer');
}
   </script>

[ Voor 26% gewijzigd door IschaGast op 12-09-2005 11:30 ]