Q510 Can I parse the HTML on a page, for example, if I know there's a table on a page, can I extract out that table and display it alone, say with a different background, title, headings etc?

You are here: irt.org | FAQ | DHTML | Q510 [ previous next ]

This is only possible in Internet Explorer 4 and only if the JavaScript and document are from the same server. Use a frameset with two hidden frames:

<frameset rows="100%,*,*" onLoad="code.extract()">
<frame src="blank.html" name="blank">
<frame src="code.html" name="code">
<frame src="table.html" name="table">
</frameset>

Then in blank.html:

<body></body>

In code.html:

<html>
<head>
<script language="JavaScript"><!--
function extract() {
    if (document.all)
        for (var i=0;i < parent.table.document.all.length; i++)
            if (parent.table.document.all(i).tagName == 'TABLE')
                parent.blank.document.write(parent.table.document.all(i).outerHTML);
}
//--></script>
</head>

<body>
</body>
</html>

In table.html:

<h1>This shouldn't appear</h1>

<table border="1">
<tr><td>1st row 1st column</td><td>1st row 2nd column</td></tr>
<tr><td>2nd row 1st column</td><td>2nd row 2nd column</td></tr>
</table>

The formatting on the table is then simply down to text manipulation of the contents of parent.table.document.all(i).outerHTML

As pointed out by Clif, it is possible to do this in Internet Explorer 4+ without using a frameset, but instead using a floating frame. Using the previous table.html and an amended code.html:

<html>
<head>
<script language="JavaScript"><!--
function extract() {
    if (document.all)
        for (var i=0; i < document.frames[0].document.all.length; i++)
            if (document.frames[0].document.all(i).tagName == 'TABLE')
                 document.all['table'].innerHTML = document.frames[0].document.all(i).outerHTML;
}
//--></script>
</head>

<body onLoad="extract()">

<iframe src="table.html" style="display:none"></iframe>

<div id="table"></div>

</body>
</html>