PDA

View Full Version : DomHelper.insertIntoTable error



enrico.triolo
7 Feb 2007, 4:29 AM
Hi, I found a little problem in the insertIntoTable method.
Let me explain it with an example: suppose I need to insert some tds inside a tr; the method first creates a dummy table with a tbody and a tr, then inserts my tds inside the tr.
Now the node variable is set with:

node = tempTableEl.firstChild.firstChild.firstChild.firstChild;

But in case there are many tds, only the first is taken and therefore added to the dom, isn't it?

I just modified the method to overcome this problem (it loops through all the tr children and adds them all to the dom); I could post my patch, but I can't find instruction on how to submit patches. If you wish I can post my patch in the forum or I can commit to the svn repository.

Cheers,
Enrico

jack.slocum
8 Feb 2007, 1:02 AM
Thanks. Posting code is fine here.

enrico.triolo
14 Feb 2007, 1:50 AM
Ok, here's my little patch.
Actually I did something more, since I needed a way to replace a table row with another, so I needed to handle a new value for the 'where' attribute, i.e. 'overwrite'.
I modified both the insertIntoTable and the insertHtml methods to allow this behaviour. I'm gonna post both of them, in case you think it could be useful.


this.insertHtml = function(where, el, html){
where = where.toLowerCase();
if(el.insertAdjacentHTML){
var tag = el.tagName.toLowerCase();
if(tag == 'table' || tag == 'tbody' || tag == 'tr'){
return insertIntoTable(tag, where, el, html);
}
switch(where){
case 'beforebegin':
el.insertAdjacentHTML(where, html);
return el.previousSibling;
case 'afterbegin':
el.insertAdjacentHTML(where, html);
return el.firstChild;
case 'beforeend':
el.insertAdjacentHTML(where, html);
return el.lastChild;
case 'afterend':
el.insertAdjacentHTML(where, html);
return el.nextSibling;
case'overwrite': //Replace all el children with html
while(el.childNodes.length > 0)
el.removeChild(el.firstChild);
el.insertAdjacentHTML('afterbegin',html);
return el.firstChild;
}
throw 'Illegal insertion point -> "' + where + '"';
}
var range = el.ownerDocument.createRange();
var frag;
switch(where){
case 'beforebegin':
range.setStartBefore(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el);
return el.previousSibling;
case 'afterbegin':
if(el.firstChild){ // faster
range.setStartBefore(el.firstChild);
}else{
range.selectNodeContents(el);
range.collapse(true);
}
frag = range.createContextualFragment(html);
el.insertBefore(frag, el.firstChild);
return el.firstChild;
case 'beforeend':
if(el.lastChild){
range.setStartAfter(el.lastChild); // faster
}else{
range.selectNodeContents(el);
range.collapse(false);
}
frag = range.createContextualFragment(html);
el.appendChild(frag);
return el.lastChild;
case 'afterend':
range.setStartAfter(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el.nextSibling);
return el.nextSibling;
case 'overwrite': //Replace all el children with html
while(el.childNodes.length>0)
el.removeChild(el.firstChild);
range.selectNodeContents(el);
range.collapse(true);
frag = range.createContextualFragment(html);
el.insertBefore(frag,el.firstChild);
return el.firstChild;
}
throw 'Illegal insertion point -> "' + where + '"';
};


var insertIntoTable = function(tag, where, el, html){
if(!tempTableEl){
tempTableEl = document.createElement('div');
}
var node;
if(tag == 'table' || tag == 'tbody'){
tempTableEl.innerHTML = '<table><tbody>'+html+'</tbody></table>';
node = tempTableEl.firstChild.firstChild; //Take the 'tbody' element
}else{
tempTableEl.innerHTML = '<table><tbody><tr>'+html+'</tr></tbody></table>';
node = tempTableEl.firstChild.firstChild.firstChild; //Take the 'tr' element
}

if(where == 'overwrite') { //Remove current el children
while(el.children.length > 0)
el.removeChild(el.firstChild);
}

numChildren = node.childNodes.length;
for(var i = 0; i < numChildren; i++) { //Loop through all tbody/tr children
curNode = node.childNodes[i].cloneNode(true);

if(where == 'beforebegin'){
el.parentNode.insertBefore(curNode, el);
}else if(where == 'afterbegin'){
el.insertBefore(curNode, el.firstChild);
}else if(where == 'beforeend'){
el.appendChild(curNode);
}else if(where == 'afterend'){
el.parentNode.insertBefore(curNode, el.nextSibling);
}
else if(where == 'overwrite') {
el.appendChild(curNode);
}
}
return el;
}


Jack, let me say thank you for your great work!