[js] tabel resizen na dynamisch verwijderen van een cel

[Verwijderd]

Ik heb een tabel waarbij ik dynamisch een cel toevoeg of verwijder. De width van de tabel staat op 100%.
Als ik een cel toevoeg dan sized de tabel mooi mee. Als ik een cel verwijder dan blijft de width van de tabel echter staan.

Bijvoorbeeld:

tabel heeft twee cellen met een width van 50 > tabel is dus 100 breed
ik voeg een cel toe > tabel wordt nu 150 breed
Ik verwijder een cel > tabel blijft 150 terwijl ik hem nu weer op 100 zou willen hebben.

Het verwijderen van een cel doe ik als volgt:

code:

var d = document.getElementById('top'); // top is het id van de te verwijderen cel
d.parentNode.removeChild(d);

Hoe krijg ik het voor elkaar om de tabel mooi mee te laten sizen?
tabel.style["width"]=100+"%" lijkt niets uit te halen

Ik ben ook op google aan het zoeken geweest maar weet niet goed hoe ik mijn probleem moet formuleren dus het is lastig daar wat te vinden.

[MMUilwijk]

Betreft het ID 'top' alleen de cel of de volledige kolom? En maak je gebruik van table headers? Wellicht zorgt een overgebleven cel / tableheader voor het blijven bestaan van de kolom?

[Verwijderd]

MMUilwijk schreef op woensdag 21 oktober 2009 @ 08:30:
Betreft het ID 'top' alleen de cel of de volledige kolom? En maak je gebruik van table headers? Wellicht zorgt een overgebleven cel / tableheader voor het blijven bestaan van de kolom?

ID 'top' betreft hier de volledige "td"

Uiteindelijk voeg ik die toe aan de tabel met:

code:

this.tablerow.appendChild(cell)

[MMUilwijk]

Het betreft in jouw geval dan toch de cel (immers, je voegt de "td" toe aan de rij). Weet je zeker dat er geen andere cellen meer in de desbetreffende kolom staan?

Post de HTML na het uitvoeren van je script anders, dan kunnen we zien wat er overblijft...

[Verwijderd]

MMUilwijk schreef op woensdag 21 oktober 2009 @ 09:28:

Post de HTML na het uitvoeren van je script anders, dan kunnen we zien wat er overblijft...

Dat lukt even niet. Alles wordt dynamisch opgebouwd. In de html zie dus vooral div's staan. Ik zit hier ook met een oude IE. Met firebug zou ik er wellicht meer info uit kunnen halen. Ik kan wel de complete javascript posten. Zal ik zo even doen (even wat rommel er eerst uit halen).

[Verwijderd]

Ik probeer het even te tekenen:


*********innerbar**********
*********header***********

***td*** ***td*** ***td***

*********footer*************

Op het moment dat ik een td verwijder blijft de rest zijn breedte houden. Als ik daarna wel weer een td toevoeg gaat de hele layout uit zijn fatsoen en schuift alles naar links.

[ Voor 94% gewijzigd door Verwijderd op 21-10-2009 13:31 ]

[Verwijderd]

Volgens mij gebeurt het volgende:

********innerbar******
********header********

***td*** ***td***

*******footer*********
Deze code maakt het geheel:

code:

this.element = element;
var innerBar=document.createElement("DIV");
innerBar.className="bar";
innerBar.style["width"]=100+"%";
innerBar.style["heigth"]=28+"px";
innerBar.innerHTML = "<DIV id='"+element.id+"_id' class='idlabel'>"+element.id+"</DIV>";
element.appendChild(innerBar);
this.group = Quanticks.drag().createSimpleActivity(element, innerBar);
this.Branches = new Array();
this.ActWidth = 360;
this.BlockWidth = 160;
this.noResizeFlag = false;
this.noBranchResizeFlag = false;

Deze code de innerbar, header en footer:

code:

this.header = document.createElement("img")
this.header.src = "images/ifelsehead.GIF"
this.header.setAttribute("width", "268");
this.header.setAttribute("height", "49");     
this.element.appendChild(this.header)
this.table = document.createElement("table")
this.tablebody = document.createElement("tbody")
this.tablerow = document.createElement("tr")
this.tablebody.appendChild(this.tablerow)
this.table.appendChild(this.tablebody)
this.element.appendChild(this.table)
this.addBranch()
this.addBranch()
this.footer = document.createElement("img")
this.footer.src = "images/ifelsefoot.GIF"
this.footer.setAttribute("width", "268");
this.footer.setAttribute("height", "49");     
this.element.appendChild(this.footer)

Deze code de td's (addBranch)

code:

var cell = document.createElement("td");
var branch=document.createElement("DIV") 
var branchConnector=document.createElement("DIV")
var innerImg=document.createElement("IMG")
innerImg.src="images/connector.gif"
branchConnector.appendChild(innerImg)
connectors[connectors.length] = branchConnector
branch.appendChild(branchConnector)
cell.appendChild(branch)
this.tablerow.appendChild(cell)
cell.setAttribute("vAlign","top")
cell.setAttribute("id","top")
branch.onresize=BranchResize  
branch.name = getNewId("IfElseBranchActivity");  
this.Branches[this.Branches.length] = branch
return branch;

en nu verwijder ik een td (branch) met:

code:

var d = document.getElementById('top');
d.parentNode.removeChild(d);

Ik heb de code wat versimpeld en overbodige zooi eruit.

Resultaat is dus de tekening zoals hierboven. Ik kom er even niet meer uit. Kan iemand een zet in de goede richting geven?

[ Voor 97% gewijzigd door Verwijderd op 22-10-2009 08:05 ]

[Verwijderd]

Niemand?