js 操縱 html
<!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 showTable() {
var ArrList = new Array(12);
//第幾行
var n = 0;
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: "辦結" };
document.write("<table border=\"1\" style =\"width:500px; margin:auto; text-align:left\">");
document.write("<tr> <td>Id</td>
<td>Name</td><td>Style</td><td>State</td><td>Operate</td> </tr>");
//循環輸出
for (var i in ArrList) {
//輸出行
document.write("<tr>");
var obj = ArrList[i];
for (var j in obj) {
document.write("<td>");
document.write(obj[j]);
document.write("</td>");
}
document.write("<td>");
document.write("<button οnclick=\"show("+ n +")\">");
document.write("查看");
document.write("</button>");
document.write("</td>");
document.write("</tr>");
n++;
}
document.write("</table>");
}
//查看子窗口
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="確定" οnclick=window.close()>');
openWindow.document.writeln('<input type="button" value="取消" οnclick=window.close()>');
openWindow.document.writeln('</center>');
openWindow.document.writeln('</body>');
openWindow.document.writeln('</html>');
openWindow.document.close();
}
</script>
</head>
<body>
<script>
showTable();
</script>
</body>
</html>