Error in Azure logic app workflow when using inline java script action

I am creating an Azure logic app workflow. As a part of it, I have an array and I need to create a table. For each item in the array I need to have one row in the table. And finally send that table via email. I have tried the inline javascript action with the below code, but I get error:

InlineCodeScriptRuntimeFailure. The inline code action 'JavaScriptCode' execution failed, with error 'document is not defined'.

Anyone knows how I can fix it? Or is there any other way to do that?

var rows = [{
    name: "John",
    age: 20,
    email: "[email protected]"
}, {
    name: "Jack",
    age: 50,
    email: "[email protected]"
}, {
    name: "Son",
    age: 45,
    email: "[email protected]"
}];

var html = "<table border='1|1'>";
for (var i = 0; i < rows.length; i++) {
    html+="<tr>";
    html+="<td>"+rows[i].name+"</td>";
    html+="<td>"+rows[i].age+"</td>";
    html+="<td>"+rows[i].email+"</td>";
    
    html+="</tr>";

}
html+="</table>";
document.getElementById("box").innerHTML = html;

Solution

i have an array and i need to create a table, for each item in the array i need to have one row in the table. and finally send that table via email.

To achieve this follow below design:

enter image description here

Inline code modified at end a bit:

var rows = [{
    name: "John",
    age: 20,
    email: "[email protected]"
}, {
    name: "Jack",
    age: 50,
    email: "[email protected]"
}, {
    name: "Son",
    age: 45,
    email: "[email protected]"
}];

var html = "<table border='2|2'>";
for (var i = 0; i < rows.length; i++) {
    html+="<tr>";
    html+="<td>"+rows[i].name+"</td>";
    html+="<td>"+rows[i].age+"</td>";
    html+="<td>"+rows[i].email+"</td>";
    
    html+="</tr>";

}
html+="</table>";
return html;

Compose Action:

<style>
#testID table, table th, table td {border: 1px solid #0000FF}
</style>
<div id="testID">
@{body('Execute_JavaScript_Code')}
</div>

Output:

enter image description here