Dynamic DOM table creation, Mac Internet Explorer 5.2

T

The_Original_MB

I have a task to create tables dynamically, using the javascript DOM.
The current method uses a 1px x 1px IFRAME to loop through some data
generation stuff, and then call JS functions in the parent window to
generate the tables.

The basic idea is to add a table tag, with a thead and tbody, on the
main parent page, that has display:none set. This then becomes
display:block when there are rows to show. The rows themselves are
added directly to the visible tbody element using appendChild(). When
the results need to be refreshed, the tbody elements are removed, and
then added again.

This works well in most browsers, including Opera. However, Mac IE
always freezes when trying to generate the table, even for the first
time.

I have several different versions, and they all generate the same
issue. The tables I am creating are quite complex: multiple cells,
colspans, images, nested tables, roll over colours, styles etc. At
first, I believed it was an issue with creating images dynamically,
however it now seems that is not the case.

I have also tried creating the table and tbody tags using the DOM and
appending them to a div, but with no luck. I have also tried creating
the tables using a hidden object and then copying the innerHTML / nodes
across to the visible one. The various versions I have cover most
bases:

* using innerHTML to add content to the cells
* using the javascript DOM to create all elements and append them
* using a mixture of the both

If anybody has any feedback or suggestions then it would be really
appreciated, particularly related to the following:

* From your experience, is this realistically possible?

* Is the problem I'm experiencing related to the complexity or size
of the table I am trying to generate? If the table is simple text only,
with 2 or 3 columns and rows, then it does work.

* What is the best method to dynamically create tables and cell
content across browsers, and in Mac IE?

* Is the problem image related? Does anyone have experience of
creating images dynamically in tables in Mac IE? Do you use "new
image()" or createElement()? (using the small table sample, this was
possible using both methods, and also innerHTML on a cell).
Thanks for your help,
Matt
 
R

RobG

The_Original_MB said:
I have a task to create tables dynamically, using the javascript DOM.
The current method uses a 1px x 1px IFRAME to loop through some data
generation stuff, and then call JS functions in the parent window to
generate the tables.

As far as I can tell, innerHTML does not work in IE 5.2 (Mac) though
the
following test returns 'Yes':

<button onclick="
(this.innerHTML)? alert('Yes') : alert('No');
">test</button>

Attempting to use even the simplest innerHTML caused IE to quit.

Using DOM createElement had much more sucess, however it was
impossible to make IE understand colspan and rowspan using
something like:

var oCell = document.createElement('td');
oCell.setAttribute('colspan','2');

Maybe there is a way of setting the colspan attribute other than
setAttribute?

As for adding images, I just use something like:

var oImg = document.createElement('img');
oImg.src = "a.jpg"
oCell.appendChild(oImg);

All my code works perfectly (well, without obvious or reported errors)
in
Safari and Firefox, so I guess it's an IE issue.

Why not just use a frame, and don't build the content dynamically?

Why not ditch IE and use Firefox or Safari? Don't tell me: still on
OS 9?
In that case, I guess you're stuck. OS X runs fine on a 300 MHz G3
or better,
so maybe it's time to upgrade?

Slabs of play code:



<html><head><title>Create Table</title>
<script type="text/javascript">
function drawTableD(place) {
if (document.createElement) {
var oTable = document.createElement('table');
oTable.style.border = '1px solid red';
var oTbody = document.createElement('tbody');
var oRow = document.createElement('tr');

// Put 4 cells in the a row
for (var i=0; i<4; i++) {
var oCell = document.createElement('td');
var oTxt = document.createTextNode('a cell');
oCell.style.border = '1px solid blue';
oCell.appendChild(oTxt);
oRow.appendChild(oCell);
}
oTbody.appendChild(oRow);


// b row with a colspan
var oRow = document.createElement('tr');

var oCell = document.createElement('td');
oCell.style.border = '1px solid green';
oCell.setAttribute('colspan', '2');
var oTxt = document.createTextNode('b Cell');
oCell.appendChild(oTxt);
oRow.appendChild(oCell);

for (var i=0; i<2; i++) {
var oCell = document.createElement('td');
oCell.style.border = '1px solid green';
var oTxt = document.createTextNode('b Cell');
oCell.appendChild(oTxt);
oRow.appendChild(oCell);
}

oTbody.appendChild(oRow);

// c row with a rowspan
var oRow = document.createElement('tr');
var oCell = document.createElement('td');
oCell.style.border = '1px solid purple';
oCell.setAttribute('rowspan', '2');
var oTxt = document.createTextNode('c Cell');
oCell.appendChild(oTxt);
oRow.appendChild(oCell);

var oCell = document.createElement('td');
oCell.style.border = '1px solid purple';
oCell.setAttribute('colspan', '2');
oCell.setAttribute('rowspan', '2');
// var oTxt = document.createTextNode('c Cell');

// Put an image in here
var oImg = document.createElement('img');
oImg.src = "a.jpg"
oCell.appendChild(oImg);
oRow.appendChild(oCell);

var oCell = document.createElement('td');
oCell.style.border = '1px solid purple';
var oTxt = document.createTextNode('c Cell');
oCell.appendChild(oTxt);
oRow.appendChild(oCell);

oTbody.appendChild(oRow);

// d row
var oRow = document.createElement('tr');
var oCell = document.createElement('td');
oCell.style.border = '1px solid gold';
var oTxt = document.createTextNode('d Cell');
oCell.appendChild(oTxt);
oRow.appendChild(oCell);

oTbody.appendChild(oRow);

// Put into page
oTable.appendChild(oTbody);
place.appendChild(oTable);

} else {
alert('your browser does not support createElement');
}

}

function drawTableI(place){

if (place.innerHTML) {

var tableHTML = [
'<table style="border: 1px solid red">',
'<tbody><tr>',
'<td style="border: 1px solid blue">a cell</td>',
'<td style="border: 1px solid blue">a cell</td>',
'<td style="border: 1px solid blue">a cell</td>',
'<td style="border: 1px solid blue">a cell</td>',
'</tr><tr>',
'<td style="border: 1px solid green"',
' colspan="2">b cell</td>',
'<td style="border: 1px solid green">b cell</td>',
'<td style="border: 1px solid green">b cell</td>',
'</tr><tr>',
'<td style="border: 1px solid purple"',
' rowspan="2">c cell</td>',
'<td style="border: 1px solid purple"',
' rowspan="2" colspan="2">',
'<img src="a.jpg" alt="aPicture">',
'</td>',
'<td style="border: 1px solid purple">c cell</td>',
'</tr><tr>',
'<td style="border: 1px solid gold">d cell</td>',
'</tr></tbody></table>'
];

// Uncomment either of the following lines that put
// the HTML into the page and IE will die.
alert('place is ' + place
+ '\nHTML is \n' + tableHTML.join('\n'));
// place.innerHTML = tableHTML.join('');

pHTML = 'just some text';
alert(pHTML);
// place.innerHTML = pHTML;


} else {
alert('innerHTML not supported');
}

}
</script>
</head><body>

Draw Table (DOM)</button>
</div>
Draw Table (innerHTML)</button>
<div>
<button onclick="(this.innerHTML)? alert('Yes')
: alert('No');">test</button>
</body></html>
 
T

The_Original_MB

Hi Rob,

Thanks for your reply last week. After spending more time investigating
the problem, I've decided a few "tricks" are necessary to get Mac IE to
generate the tables as expected.

Mainly these are use setTimeout to create a delay after writing each
table row and also append the rows to a table that is hidden using CSS,
then copy it across to the visible table.

Thanks
Matt
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,835
Latest member
KetoRushACVBuy

Latest Threads

Top