Colspan用于脚本/原型DOM元素

Question

I utilized scriptaculose/prototype Builder to create TR and TD. The colspan doesn't work in IE, but it works in FF and Chrome. Do you have any experience on this issue?

This doesn't work in IE, but it works in FF and Chrome:

Builder.node('td',{'colspan':'12','class':'bdr-bottom'},(noteText))

This works in IE, FF and Chrome:

for (var i=1; i<numCols; i++)
{       
    noteRowSpan=Builder.node('td',{'class':'bdr-bottom'},(''));     
    $(noteRow2).insert($(noteRowSpan));  
}       

Answer 1

If you use the new Element() like below you do not need to load the scriptaculous library unless you need the effects - these are built into the code PrototypeJS framework.

This

Builder.node('td',{'colspan':'12','class':'bdr-bottom'},(noteText))

can be changed to

new Element('td',{'colspan':12,'class':'bdr-bottom'}).update(noteText);

this

for (var i=1; i<numCols; i++)
{       
    noteRowSpan=Builder.node('td',{'class':'bdr-bottom'},(''));     
    $(noteRow2).insert($(noteRowSpan));  
}

can be changed to this

for(var i=1 ; i<numCols; i++)
{
    noteRowSpan = new Element('td',{'class':'bdr-bottom'});
    $(noteRow2).insert(noteRowSpan);
    //if noteRow2 is created with new Element() you don't need to re-extend it do it like this
    noteRow2.insert(noteRowSpan);
}

EDIT FOR FOLLOWUP

the parameters of the new Element() method are not the child elements but the attributes of the element you want to create.

for what you want to do

noteRow1= new Element('tr',                           
                   new Element('td',{'class': 'bld rt'},'Date:'),
                   new Element('td').update(noteText)
                   ); 

should be done like this

noteRow1= new Element('tr');
noteRow1.insert(new Element('td',{'class': 'bld rt'}.update('Date:'));
noteRow1.insert(new Element('td').update(noteText));

or chained together

noteRow1= new Element('tr').insert(new Element('td',{'class': 'bld rt'}).update('Date:')).insert(new Element('td').update(noteText));

Also as a note of guidelines - you can click the comment link to ask followup questions

Answer 2

Thanks. I am using new Element and it works fine. How to use nested new Elements? The code is not working :

noteRow1= new Element('tr',                           
                       new Element('td',{'class': 'bld rt'},'Date:'),
                       new Element('td').update(noteText)
                       );       

Thanks.