/    Sign up×
Community /Pin to ProfileBookmark

How to run javascript after IE rendering each table row?

Copy linkTweet thisAlerts:
Dec 08.2008

Hi, I run into a problem which can be demonstrated by the following simple example:

[code]
<html>
<head>
<script>
function sayHello()
{
alert(“hello”);
}
</script>
</head>

<body>
<table>
<tr>
<td>1</td>
<td>2</td>

</tr>
<script>sayHello();</script>
<tr>
<td>1</td>
<td>2</td>
</tr>
<script>sayHello();</script>
<tr>

<td>1</td>
<td>2</td>
</tr>
<script>sayHello();</script>
</table>

</body>
</html>
[/code]

If you open this demo using Firefox, you can see Firefox renders one row, run the javascript, renders the next row, run the next javascript … …
This is the effect that I want.

However if you open it with IE (I am using IE 6), IE run all the javascripts before rendering the table rows. I am wondering if it’s possible to find a workaround, so IE can also alternately render a table row, run the javascript, like what firefox did.

Any help is appreciated. Thanks.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorDec 08.2008 — No way. This is the way IE runs the HTML codes on loading. It will not display the table's elements till the final end tag </table> is loaded.

What is your need, after all?
Copy linkTweet thisAlerts:
@sushiDec 08.2008 — There are ways to do this.

After the first pop up, append a new row to the DOM after the alert. So you must created your table and content with js, and not with html. So your document should start like this

[CODE]
<html>
<head>
<script>
function sayHello()
{
alert("hello");
/*
insert table row, etc..
*/
}
</script>
</head>

<body>
<table>
<tr>
<td>1</td>
<td>2</td>

</tr>
<script>sayHello();</script>
</table>

</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@xeonauthorDec 09.2008 — Thanks sushi.

I thought about that solution before. Just wondering if there is a easier workaround for IE. I am using JSP tag to loop through a list and construct the table, a bit of reluctant to convert the codes into javascript.

There are ways to do this.

After the first pop up, append a new row to the DOM after the alert. So you must created your table and content with js, and not with html. So your document should start like this

[CODE]
<html>
<head>
<script>
function sayHello()
{
alert("hello");
/*
insert table row, etc..
*/
}
</script>
</head>

<body>
<table>
<tr>
<td>1</td>
<td>2</td>

</tr>
<script>sayHello();</script>
</table>

</body>
</html>
[/CODE][/QUOTE]
Copy linkTweet thisAlerts:
@voidvectorDec 09.2008 — IE won't fully cooperate even if you load it via JavaScript. If you don't pause between each row, you will still get similar effect. For example
[code=html]
<html>
<head>
<script>
function sayHello()
{
alert(document.body.innerHTML);
}

function inserRow(table)
{
var num = table.rows.length;
table.insertRow(num);
table.rows[num].insertCell(0);
table.rows[num].cells[0].appendChild(document.createTextNode(1));
table.rows[num].insertCell(1);
table.rows[num].cells[1].appendChild(document.createTextNode(2));

sayHello();
if (num < 2)
inserRow(table);
}


window.onload = function ()
{
var t = document.createElement('table');
document.body.appendChild(t);
inserRow(t);
}
</script>
</head>

<body>
</body>
[/code]
×

Success!

Help @xeon spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...