Archief - JS: Naam van element veranderen

AncientRites · 11 sep 2007

Ik zit met een dynamische tabel die wanneer men op een knopje drukt een extra row moet genereren. Deze row wordt gebaseerd op de velden binnen de eerste, reeds bestaande row.

Voorbeeld:
Kolom 1 / Kolom 2
Textbox1 / Selectbox1

Wanneer je op Add Row klikt, wordt er een nieuwe rijd aangemaakt die als inhoud textbox2 en selectbox2 krijgt (in mijn praktijksituatie zit het wel iets ingewikkelder in elkaar maar dit is de basis).

Ik ga nu als volgt te werk:

PHP:

function addRowToTable(id)
{
  var tbl = document.getElementById('tbl'+id); //de huidige tabel
  var lastRow = tbl.rows.length; //aantal rijen
  var iteration = lastRow; 
  var row = tbl.insertRow(lastRow); //rij inserten na laatste rij
  var numCol = tbl.rows[0].cells.length; //aantal kolommen
  var frm = document.Product; //formulier Producten
  
  for (i = 0; i < numCol; i++) {
  	  var col = i + 1; //huidige kolom
  	  var cellId = 'td' + id + '-' + col + '-' + 1; //Naam van kolom i in rij 1
	  var cell = row.insertCell(i); //cel aanmaken
	  var bufferId = 'strTableContent'+ id + '-' + col + '-' + 1; //Naam van element binnen cellId
	  var bufferedName = 'buffer'; //Naam die gebruikt wordt om naam tijdelijk een andere naam te geven, als tussenstap
	  
	  //inhoud eerste cel kopieren naar variabele voor later gebruik
	  var bufferHTML = document.getElementById(cellId).innerHTML;

          //Naam van element (tekstbox of listbox) eerste rij, kolom i, vervangen naar 'buffer'
	  $(frm[bufferId]).setAttribute('name', bufferedName);

          //bufferHTML (gehele inhoud van eerste cel) kopieren naar de nieuwe cel in nieuwe rij
	  cell.innerHTML = bufferHTML;
	  
          //De naam van het gekopieerde element zijn nieuwe waarde geven
	  $(frm[bufferId]).setAttribute('name', 'strTableContent'+ id + '-' + col + '-' + lastRow);

          //De naam van het oude element (buffer) zijn oude waarde teruggeven
	  $(frm[bufferedName]).setAttribute('name', bufferId);
  }
  
  //totaal aantal rijen verhogen met 1
  $('numrowstbl' + id).value++; 
  
}

Principe is dus:
Tekstveld1 wordt gekopieerd naar variabele
Tekstveld1 krijgt naam 'Buffer'
Variabele wordt in nieuwe cel geplaatst, met naam Tekstveld1
Variabele krijgt nieuwe naam Tekstveld2
'Buffer' krijgt oude naam Tekstveld1 terug

Dit alles werkt perfect in FireFox en Opera, maar IE doet moeilijk. Ik vermoed dat bij het kopieren van de innerHTML deze HTML nog niet wordt gebruikt voor de rest van het script?

Alle hulp is welkom.

n00bslayer · 11 sep 2007

Eens zien in hoeverre ik de bedoeling van je script+uitleg kan doorgronden..

InnerHTML gebruiken in IE/Tables is een gevaarlijke en onvoorspelbare combinatie. Hier werk je het best conform de w3c regels. Je buffert best ook niet in de DOM maar in je javascript zelf met behulp van .cloneNode(true), waarna je vervolgens de namen van de child elementen of je rij zelf aan kan passen (het liefst met getElementsByTagName(), om whitespace problemen te verkomen, en zonder het gebruik van een document.Product referentie) met .name ipv setAttribute() wat de snelheid van je script alleen maar ten goede komt.

In een rapke:

Code:

var tbl=..;
var rij=tbl.rows[tbl.rows.length-1].cloneNode(true);
for(i=0,j=rij.cells.length; i<j; i++){
   var cel=rij[i];
   cel.getElementsByTagName(..)[0].name='...'; // of je kan hier ook een lusje van maken natuurlijk
   ..
}
tbl.appendChild(rij);

Edit: als je al die name aanpassingen maakt om de serverside afhandeling te vergemakkelijken, kan je misschien ook eens overwegen om name="type[]" te gebruiken(dus voor alle gelijksoortige form elementen eenzelfde name uitkiezen, met [] daarachter), zodat je serverside al direct met een array kan werken ipv deze kunstmatig om te zetten. Uitlezen doe je dan bvb in php door

Code:

$j=count($_POST['type']);
for($i=0; $i<$j; $i++) {
   $_POST['type'][$i]..
}

Archief - JS: Naam van element veranderen

AncientRites

Legacy Member

n00bslayer

Legacy Member