[JS] dynamische table i.c.m deleteRow

[jee-weetje]

Ik ben bezig met het maken van een dynamische tabel opgebouwd met JavaScript. Ik heb een meerdere arrays waarmee ik een tabel ga vullen (daarom kan ik de tabel dus niet eerst staitsch geladen worden). D.m.v. een loop loop ik vervolgesn door de array heen om de data te presenteren in een nieuwe row / <tr>.

Dit is de code die hiervoo zorgt:

code:

// var partnumber is mijn (unieke) variabel die geplaats zal worden

var next_cell_number = 1;
 var choosen_pos_name = arr_sel_positions[found_nr];
 var table =    document.getElementById(choosen_pos_name);
 var lastRow =  table.rows.length;
 var row =      table.insertRow(lastRow);

 for (index=0; index<array_to_use.length; index++){
     if (array_to_use[index][0]==partnumber){

        var FirstCell = row.insertCell(0);
        var textNode = document.createTextNode(+array_to_use[index][1]);
        FirstCell.appendChild(textNode);

               
        var Rightcell = row.insertCell(next_cell_number);
    Rightcell.innerHTML='<a href=\"javascript:delete('+lastRow+','+this.parentNode.parentNode.rowIndex+')\">'+txt_delete+'</a>';
        index=array_to_use.length; // stop loop
        }
    }

De tabel wordt gemaakt, en in de laatste cell bevat een aanroep naar mijn functie "delete". Hier zal dus moeten worden gekeken welke ro er verwijderen moet worden. Ik heb geprobeerd om, zoals hierboven een RoIndex mee te geven, maar dat kan niet omdat 'this.parentNode.' geen properties heeft.

Ik zit te denken om een id aan de row mee te geven, maar kan nergens vinden hoe ik dat moet doen met 'insertRow()'.

Is er iemand die het zo oplepelt of iemand die een ander suggestie heeft ?

[Verwijderd]

ik zou wat meer DOM werken,

dus met eventhandlers ipv javascript dingen enzo

dus

code:

rightCell.onclick = function() {
  deleteElement(this.parentNode)
}

function deleteElement(el) {
  el.parentNode.removeChild(el);
}

[ Voor 5% gewijzigd door Verwijderd op 03-02-2005 11:56 ]

[jee-weetje]

Bedankt voor de tip.Het werkt tot dusver!!

Ik moet er nog wat meer functionaliteit achter hangen, maar als ik weer wat te vragen hebt horen jullie het wel !

Vind trouwens dat er weinig documentatie te vinden is over het DOM gebeuren. Kijk altijd eerst op w3schools, maar das niet zo uitgebreid. Iemand met een goeie site ? Dan hoef ik jullie niet zo aan het hoofd te zeuren.

[Verwijderd]

www.devguru.com neem ik vaak als naslag

ik vind het altijd wel zo netjes om in plaats van dingen als insertCell en insertRow te werken met

document.createElement(nodeName); en
Node.insertBefore() of Node.appendChild()

verder: attributen via Node.setAttribute(name,value);

[Verwijderd]

Een ranzig voorbeeld laat zien dat het niet zo simpel is als het lijkt;

HTML:

<script>
window.onload = function (e) {
  var a = document.getElementsByTagName('tr');
  for (var i = 0; i < a.length; i++) {
    a[i].onclick = function (e) {
      document.getElementById('table').insertRow(this.sectionRowIndex + 1);
    }
  }
}
</script>
<table id="table" border="10" width="400">
  <tr>
    <td rowspan="3">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
</table>

Voer uit en huiver. Het invoegen van nieuwe rijen is niet eenvoudig, er komen wat ingewikkeldere algoritmes aan te pas. Wanneer je namelijk complexe tabelstructuren hebt met column spans en row spans, dan moet je goed weten wat je moet invoegen. Soms moet je een TR invoegen met 1 td erin, soms meerdere td's.
Ik heb een class geschreven die methodes levert; insertRow(above|below), insertColumn(before|after), removeUnnecessaryColumnSpan. De code daarvan bedroeg zo'n 800 regels code. Het uitleggen van de algoritmes is ook niet eenvoudig uit te leggen. Je zult toch pen en papier moeten pakken en gaan nadenken. Ik kan je nog wel vertellen dat het slim is om lookuptable te genereren van je tabel object, die een NxM matrix is; met N het aantal rijen en M het aantal kolommen. Je kan dan eenvoudig per rij en kolom opvragen welk object erbij hoort.
[/patser_mode] < he Mophor

// edit

Heb even een voorbeeld gemaakt om te illustreren waar de knelpunten zitten:

code:

+------+-+
|  1   |2|
+---+--+-+
| 3 |4 |5|
+   +--+-+
|   | 7  |
+---+--+-+

Klik in 4, kies Insert Row Below. Vervolgens moet je algoritme een rij invoegen, snappen dat hij 2 TD's moet toevoegen en bovendien de rowspan van 3 moet verhogen.

[ Voor 30% gewijzigd door Verwijderd op 03-02-2005 13:46 ]

[jee-weetje]

@Quist: gelukkig wordt dat van mij niet al te ingewikkeld...

Maar bedankt voor de nuttige link en de helder bewoording (heb nog niet al teveel kaas gegeten van dit onderwerp)