Merge table cells

[Verwijderd]

Ik ben ergens mee bezig wat eigenlijk min of meer over het randje van mijn beperkte hersencapaciteit gaat, het betreft het volgende.

Ik heb een wysiwyg editor gebouwd, die tot nu toe prima werkt, het is me gelukt om (bijna) xhtml strikte code te genereren. Maar bij de volgende functionaliteit stopt het bij mij: Het samenvoegen van tabel cellen...

Het was me gelukt om verticaal kolommen samen te voegen en hierbij rekening te houden met colSpans, zodat de tabel gewoon prima klopte, maar eventjes was me ontschoten dat je natuurlijk ook verticaal cellen moet kunnen samenvoegen, tja, ik ben een paar keer begonnen om een functie in elkaar te breien, maar het lukt me eigenlijk nog niet eens een fatsoenlijk begin op te zetten..

Even een stukje voorbeeldcode die ik gebruik om horizontaal cellen samen te voegen..

JavaScript:

//editorSelectedTableCol = de geselecteerde cell

//Is er een volgende kolom?
if(editorSelectedTableCol.nextSibling){
    //Heeft deze een colspan?
    if(editorSelectedTableCol.nextSibling.getAttribute("colSpan") == null){
        //Zo niet, colspan is 1
        editorSelectedTableCol.nextSibling.setAttribute("colSpan",1);
    }
    //Heeft de geselecteerde cell een colspan?
    if(editorSelectedTableCol.getAttribute("colSpan") == null){
        //Zo niet, colspan is 1
        editorSelectedTableCol.setAttribute("colSpan",1);
    }
    //colspan bepalen
    editorSelectedTableCol.setAttribute("colSpan",parseInt(editorSelectedTableCol.getAttribute("colspan")) + parseInt(editorSelectedTableCol.nextSibling.getAttribute("colspan")));
    //innerhtml van volgende cell toevoegen aan huidige
    editorSelectedTableCol.innerHTML += editorSelectedTableCol.nextSibling.innerHTML;
    //volgende cell verwijderen
    editorSelectedTableCol.parentNode.deleteCell(editorSelectedTableCol.nextSibling.cellIndex);
}

Horizontaal samenvoegen is nog relatief eenvoudig, maar verticaal..

De vraag is eigenlijk, hoe kom ik te weten welke cellen er onder, of boven de geselecteerde cell liggen, ook als deze een rowspan óf een colspan heeft óf als de bovenliggende regels cellen bevatten met een row of colspan?

Overigens viel me op dat er nog maar weinig mensen problemen hebben gehad met een dergelijke functionaliteit, of heb ik gewoon heel slecht gezocht?

Ik heb nog de functies doorgesluisd die tinyMCE gebruikt voor het samenvoegen van cellen, maar daar kom ik ook niet uit. Die editor gebruikt een soort visuele tabel..

Ik hoop dat het een klein beetje duidelijk is en dat jullie me een beetje verder kunnen helpen..

[djluc]

Gewoon de volgende rij doorlopen en alle colspans optellen tot je er bent?

[Verwijderd]

Ehm..

Zoals je in het bovenstaande script kunt zien, is dat niet het probleem, het gaat om de rowspan.. Wat nu bijvoorbeeld als er in de regel die ik heb geselecteerd een cel voorkomt die in één van de bovenliggende regels een rowspan heeft meegekregen, maar niet over de volgende regel valt?

En om het meteen maar helemaal lastig te maken, wat nu als die cell met rowspan nu in een regel begint waar weer een andere cell overheen valt uit een voorgaande regel?

En nog een niveau hoger, wat nu als een van die cellen ook nog eens een colspan heeft?

Zo eenvoudig is het..

[Verwijderd]

Niemand die een dergelijk probleem heeft opgelost of een oplossing weet?

[moozzuzz]

Misschien moet je eerst es grafisch tonen wat je precies bedoeld? Ik kom alvast niet uit jouw vragen...

Dus plaatje met situatie 1 + gewenste effect, situatie 2 + .... etc.

[Verwijderd]

Stel, ik heb de volgende tabel in mijn editor:

			Cell 1
			Cell 2

Mijn doel is eigelijk, als mijn selectie in Cell 1 is geplaatst, ik deze met Cell 2 wil samenvoegen. Echter kun je met javascript bij mijn weten in een tabel regel niet opvragen welke bovenliggende cellen over een regel heen vallen door middel van een rowSpan.

Dat is mijn probleem, hoe kan ik nu te weten komen welke cell, Cell 2 is? Zodat ik die kan verwijderen en de content kan toevoegen aan cell 1?

[funkwurm]

Okee hier is een idee:

Aan het begin van het editen zijn er nog geen rowspans of colspans, toch?

Ik zou na het plaatsen van de tabel (door de gebruiker in de editor) elke cell een custom attribute/property geven waarin je de huidige cellIndex (en wellicht de rowIndex van de betreffende row, maar die lijkt me minder van belang) plaatst. Als je nu ergens een rowspan toepast, dan verandert de cellIndex van een aantal cellen, maar jouw custom attribute verandert niet, dus heb je bij een 2e verandering in de rowspan nog steeds een betrouwbare cellIndex-variant.

Dan kun je dus achter de samen te voegen cell komen door de customCellIndex van de huidige op te vragen, en te kijken welke cell een rowtje lager dezelfde customCellIndex heeft.

[Verwijderd]

Ha, goed idee..
Het kan dan echter wel voorkomen dat er al een tabel op de pagina staat met samengevoegde cellen. Maar ik denk dat ik de tabel dan wel kan doorlopen om die attributen per cell goed te zetten, dus moet dat geen problemen opleveren.. Ik ga ff wat proberen, bedankt!