建一个表格，用js 数组将数据填充，并且能有查看功能！
| id | name | style | 查看 |
| button | |||
第一次学习js，第一版代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
//显示数组
function arrayFunction(num) {
var ArrList = new Array();
ArrList[0] = { id: "001", name: "张三", style: "待阅", state: "未办" };
ArrList[1] = { id: "002", name: "李四", style: "已阅", state: "已办" };
ArrList[2] = { id: "003", name: "王五", style: "待阅", state: "已办" };
ArrList[3] = { id: "004", name: "黑六", style: "已阅", state: "办结" };
ArrList[4] = { id: "005", name: "朱七", style: "待阅", state: "未办" };
ArrList[5] = { id: "006", name: "程八", style: "待阅", state: "已办" };
ArrList[6] = { id: "007", name: "朱九", style: "待阅", state: "未办" };
ArrList[7] = { id: "008", name: "周十", style: "已阅", state: "已办" };
ArrList[8] = { id: "009", name: "吴十一", style: "待阅", state: "未办" };
ArrList[9] = { id: "010", name: "郑十二", style: "待阅", state: "办结" };
ArrList[10] = { id: "011", name: "冯十三", style: "待阅", state: "已办" };
ArrList[11] = { id: "012", name: "陈十四", style: "已阅", state: "办结" };
return ArrList[num];
}
//查看子窗口
function show(num) {
openWindow = window.open("", "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=200");
openWindow.document.writeln('<html>');
openWindow.document.writeln('<TITLE>显示</TITLE>');
openWindow.document.writeln('<BODY>');
openWindow.document.writeln('<center>');
openWindow.document.writeln('<table border="1" width="200" >');
openWindow.document.writeln('<tr>');
openWindow.document.writeln('<td>');
openWindow.document.writeln('id');
openWindow.document.writeln('</td>');
openWindow.document.writeln('<td>');
openWindow.document.writeln(arrayFunction(num).id);
openWindow.document.writeln('</td>');
openWindow.document.writeln('</tr>');
openWindow.document.writeln('<tr>');
openWindow.document.writeln('<td>');
openWindow.document.writeln('name');
openWindow.document.writeln('</td>');
openWindow.document.writeln('<td>');
openWindow.document.writeln(arrayFunction(num).name);
openWindow.document.writeln('</td>');
openWindow.document.writeln('</tr>');
openWindow.document.writeln('<tr>');
openWindow.document.writeln('<td>');
openWindow.document.writeln('style');
openWindow.document.writeln('</td>');
openWindow.document.writeln('<td>');
openWindow.document.writeln(arrayFunction(num).style);
openWindow.document.writeln('</td>');
openWindow.document.writeln('</tr>');
openWindow.document.writeln('<tr>');
openWindow.document.writeln('<td>');
openWindow.document.writeln('state');
openWindow.document.writeln('</td>');
openWindow.document.writeln('<td>');
openWindow.document.writeln(arrayFunction(num).state);
openWindow.document.writeln('</td>');
openWindow.document.writeln('</tr>');
openWindow.document.writeln('</table>');
openWindow.document.writeln('<input type="button" value="确定" onclick=window.close()>');
openWindow.document.writeln('<input type="button" value="取消" onclick=window.close()>');
openWindow.document.writeln('</center>');
openWindow.document.writeln('</BODY>');
openWindow.document.writeln('</HTML>');
openWindow.document.close();
}
</script>
</head>
<body >
<table border="1" style ="width:500px; margin:auto; text-align:left">
<tr id="Tr1">
<td>Id</td>
<td>Name</td>
<td>Style</td>
<td>State</td>
<td>Operate</td>
</tr>
<tr id="id1">
<td><script>document.write(arrayFunction(0).id)</script></td>
<td><script>document.write(arrayFunction(0).name)</script></td>
<td><script>document.write(arrayFunction(0).style)</script></td>
<td><script>document.write(arrayFunction(0).state)</script></td>
<td><button onclick="show(0)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(1).id)</script></td>
<td><script> document.write(arrayFunction(1).name)</script></td>
<td><script>document.write(arrayFunction(1).style)</script></td>
<td><script> document.write(arrayFunction(1).state)</script></td>
<td><button onclick="show(1)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(2).id)</script></td>
<td><script>document.write(arrayFunction(2).name)</script></td>
<td><script>document.write(arrayFunction(2).style)</script></td>
<td><script>document.write(arrayFunction(2).state)</script></td>
<td><button onclick="show(2)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(3).id)</script></td>
<td><script>document.write(arrayFunction(3).name)</script></td>
<td><script>document.write(arrayFunction(3).style)</script></td>
<td><script>document.write(arrayFunction(3).state)</script></td>
<td><button onclick="show(3)">查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(4).id)</script></td>
<td><script>document.write(arrayFunction(4).name)</script></td>
<td><script>document.write(arrayFunction(4).style)</script></td>
<td><script>document.write(arrayFunction(4).state)</script></td>
<td><button onclick="show(4)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(5).id)</script></td>
<td><script>document.write(arrayFunction(5).name)</script></td>
<td><script>document.write(arrayFunction(5).style)</script></td>
<td><script>document.write(arrayFunction(5).state)</script></td>
<td><button onclick="show(5)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(6).id)</script></td>
<td><script>document.write(arrayFunction(6).name)</script></td>
<td><script>document.write(arrayFunction(6).style)</script></td>
<td><script>document.write(arrayFunction(6).state)</script></td>
<td><button onclick="show(6)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(7).id)</script></td>
<td><script>document.write(arrayFunction(7).name)</script></td>
<td><script>document.write(arrayFunction(7).style)</script></td>
<td><script>document.write(arrayFunction(7).state)</script></td>
<td><button onclick="show(7)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(8).id)</script></td>
<td><script>document.write(arrayFunction(8).name)</script></td>
<td><script>document.write(arrayFunction(8).style)</script></td>
<td><script>document.write(arrayFunction(8).state)</script></td>
<td><button onclick="show(8)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(9).id)</script></td>
<td><script>document.write(arrayFunction(9).name)</script></td>
<td><script>document.write(arrayFunction(9).style)</script></td>
<td><script>document.write(arrayFunction(9).state)</script></td>
<td><button onclick="show(9)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(10).id)</script></td>
<td><script>document.write(arrayFunction(10).name)</script></td>
<td><script>document.write(arrayFunction(10).style)</script></td>
<td><script>document.write(arrayFunction(10).state)</script></td>
<td><button onclick="show(10)" >查看</button></td>
</tr>
<tr>
<td><script>document.write(arrayFunction(11).id)</script></td>
<td><script>document.write(arrayFunction(11).name)</script></td>
<td><script>document.write(arrayFunction(11).style)</script></td>
<td><script>document.write(arrayFunction(11).state)</script></td>
<td><button onclick="show(11)" >查看</button></td>
</tr>
</table>
</body>
</html>