Q1110 How can I popup a new window and populate it with data from several arrays of data displayed in a table?

You are here: irt.org | FAQ | JavaScript | Object | Q1110 [ previous next ]

I would suggest you might want to merge your arrays into an array of objects where the properties of the each object would be the data from each array.

Something like this:

<html>
<head>
<script language="JavaScript"><!--
function makeItem(item,model,price,imageurl) {
    this.item=item;
    this.model=model;
    this.price=price;
    this.imageurl=imageurl;
    return this;
}

theItem = new Array();
theItem[0] = new makeItem('Frisbee','xyz21','12.95','images/frisbeexyz21.gif');
theItem[1] = new makeItem('Fridge','brrr12','212.95','images/fridge1.gif');

function myVoid() { ; }

function showItem(idx) {
    WinId = window.open('','newwin','width=400,height=500');
    var Text = ''
    Text += '<center>';
    Text += '<h3>Item: ' + theItem[idx].item +'</h3>';
    Text += '<h3>Model: ' + theItem[idx].model +'</h3>';
    Text += '<h3>Price: ' + theItem[idx].price +'</h3>';
    Text += '<p><img src="' + theItem[idx].imageurl +'">';
    WinId.document.open();
    WinId.document.write(Text);
    WinId.document.close();
}
//--></script>
</head>

<body>

<script language="JavaScript"><!--
Text = '<table>';
Text+= '<tr><td><b>Item</b></td><td><b>Model</b></td><td><b>Price</b></td>';
for (i = 0, n=theItem.length;i<n;i++) {
    Text += '<tr><td><a href="javascript:myVoid" onClick="showItem(' + i + '); return false">' + theItem[i].item + '</a></td>';
    Text += '<td>' + theItem[i].model + '</td>';
    Text += '<td>' + theItem[i].price + '</td>';
    Text += '</tr>\n';
}
Text += '</table>';
document.write(Text);
//--></script>

</body>
</html>