473,898 Members | 2,767 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Dynamic DOM table creation, Mac Internet Explorer 5.2

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

Jul 23 '05 #1
2 8737

The_Original_MB wrote:
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.create Element('td');
oCell.setAttrib ute('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.create Element('img');
oImg.src = "a.jpg"
oCell.appendChi ld(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><ti tle>Create Table</title>
<script type="text/javascript">
function drawTableD(plac e) {
if (document.creat eElement) {
var oTable = document.create Element('table' );
oTable.style.bo rder = '1px solid red';
var oTbody = document.create Element('tbody' );
var oRow = document.create Element('tr');

// Put 4 cells in the a row
for (var i=0; i<4; i++) {
var oCell = document.create Element('td');
var oTxt = document.create TextNode('a cell');
oCell.style.bor der = '1px solid blue';
oCell.appendChi ld(oTxt);
oRow.appendChil d(oCell);
}
oTbody.appendCh ild(oRow);
// b row with a colspan
var oRow = document.create Element('tr');

var oCell = document.create Element('td');
oCell.style.bor der = '1px solid green';
oCell.setAttrib ute('colspan', '2');
var oTxt = document.create TextNode('b Cell');
oCell.appendChi ld(oTxt);
oRow.appendChil d(oCell);

for (var i=0; i<2; i++) {
var oCell = document.create Element('td');
oCell.style.bor der = '1px solid green';
var oTxt = document.create TextNode('b Cell');
oCell.appendChi ld(oTxt);
oRow.appendChil d(oCell);
}

oTbody.appendCh ild(oRow);

// c row with a rowspan
var oRow = document.create Element('tr');
var oCell = document.create Element('td');
oCell.style.bor der = '1px solid purple';
oCell.setAttrib ute('rowspan', '2');
var oTxt = document.create TextNode('c Cell');
oCell.appendChi ld(oTxt);
oRow.appendChil d(oCell);

var oCell = document.create Element('td');
oCell.style.bor der = '1px solid purple';
oCell.setAttrib ute('colspan', '2');
oCell.setAttrib ute('rowspan', '2');
// var oTxt = document.create TextNode('c Cell');

// Put an image in here
var oImg = document.create Element('img');
oImg.src = "a.jpg"
oCell.appendChi ld(oImg);
oRow.appendChil d(oCell);

var oCell = document.create Element('td');
oCell.style.bor der = '1px solid purple';
var oTxt = document.create TextNode('c Cell');
oCell.appendChi ld(oTxt);
oRow.appendChil d(oCell);

oTbody.appendCh ild(oRow);

// d row
var oRow = document.create Element('tr');
var oCell = document.create Element('td');
oCell.style.bor der = '1px solid gold';
var oTxt = document.create TextNode('d Cell');
oCell.appendChi ld(oTxt);
oRow.appendChil d(oCell);

oTbody.appendCh ild(oRow);

// Put into page
oTable.appendCh ild(oTbody);
place.appendChi ld(oTable);

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

}

function drawTableI(plac e){

if (place.innerHTM L) {

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('innerHTM L not supported');
}

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

<div>
<button onclick="drawTa bleD(this.paren tNode);"Draw Table (DOM)</button> </div>
<div>
<button onclick="drawTa bleI(this.paren tNode);"Draw Table (innerHTML)</button>

<div>
<button onclick="(this. innerHTML)? alert('Yes')
: alert('No');">t est</button>
</body></html>
--
Rob

Jul 23 '05 #2
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

Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
2906
by: mr_burns | last post by:
hi, is it possible to change the contents of a combo box when the contents of another are changed. for example, if i had a combo box called garments containing shirts, trousers and hats, when the user selects shirts another combo box called 'size' would contain sizes in relation to shirts (ie. chest/neck size). the same would occur for trousers and hats. when the user selects an option in the garment combo box, the options available...
2
2591
by: Martin Doyle | last post by:
Ok, I'm building a JS-based limitless-sublevel dynamic menu and am making it cross browser as well - 3 packs of aspirin so far and counting ;) I'm having a weird rendering problem using Opera 7.51, even though it displays fine in Mozilla 1.6, Firefox 0.9, Netscape 7.1 and Internet Explorer 6.0 Hope someone can help!
2
1876
by: Glenn | last post by:
Dynamic help topic links show properly and search brings up links, but when any link is clicked I receive a "Page Cannot be displayed message in the Explorer window and the title bar of Visual Studio reports that it cannot find server. What server is this? The start page works fine going to the internet and my normal Internet Explorer is working fine. VS 2003 v. 7.1.3044 Framework v. 1.1.4322 -- Thanks for any help, suggestions before...
3
3172
by: daveland | last post by:
I am working on some JavaScript that dynamically adds rows to a table in response to a button click. A new row does appear on the screen when the button is clicked. However, that table to which a row has been added is itself contained within an outer table (to handle the desired screen layout). That outer table does not properly grow to contain the new size of the table to which the row was added. (More specifically, I have...
1
4866
by: SAN CAZIANO | last post by:
I have create a dynamic html table by adding some rows where I have to put some value in an input field and now how can I get all value of all row ??? I try this but it doesn' work button onclik=Alert("EditFieldValue2.value"); Please reply me as soon as possible.
3
1622
by: James | last post by:
Situation: I have a page, built using document.write(). When I hit 'save as', IE goes and saves the contents of 'about:blank' to that file, rather than saving the HTML it's displaying in the window. Does anyone know how to get around this?
7
1896
by: Abraham Luna | last post by:
how do i stop the dynamic validators from breaking explorer if i use a dynamic validator and move to a different control it breaks explorer and i can type in the page when i'm not supposed to. thank you.
9
5325
by: dli07 | last post by:
Hello, I'm trying to convert a piece of code that creates a dynamic vertical resizing bar in a table from internet explorer to firefox. It's based on a post from http://blogs.crankygoblin.com/blogs/geoff.appleby/pages/50712.aspx. I've also read the post on this topic by bggraphics, but he doesn't arrive at a final result. The main problem I am having is that the layerX and layerY event properties don't work. They're supposed to return the...
1
4928
by: cdmsenthil | last post by:
I have an Infragistics UltrawebGrid . Each Row in the grid is attached to a context menu using Infragistics CSOM Upon click on the menu, I am creating an Iframe dynamically which points to another page in the same domain which also contains infragistics datagid populated with default data retrieved from Data Base. After creating the frame I am attaching it to the HTML DOM and show it as modal popup with OK and Cancel Button inside an...
0
9993
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10857
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10946
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10481
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9658
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5877
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6076
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4705
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4295
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.