2012-07-25 39 views
1

可能重複:
Create HTML table from javascript array需要創建一個HTML表格使用JavaScript

我已經提供了這樣的

var univArray = new Array(
     {name: "Stanford University", nick: "Stanford", ownership: "private", sys: "n/a", SATh: 1550, SATl: 1360, tuition: 27204, room: 8680}, 
     {name: "University of California, Berkeley", nick: "UC Berkeley", ownership: "public", sys: "University of California", SATh: 1440, SATl: 1170, tuition: 4200, room: 10608}, 
     {name: "University of California, Santa Cruz", nick: "UC Santa Cruz", ownership: "public", sys: "University of California", SATh: 1270, SATl: 1030, tuition: 4384, room: 9708}, 
     {name: "San Francisco State University", nick: "SFSU", ownership: "public", sys: "CalState", SATh: 1120, SATl: 850, tuition: 1826, room: 6736}, 
     {name: "San Jose State University", nick: "SJSU", ownership: "public", sys: "CalState", SATh: 1140, SATl: 860, tuition: 1912, room: 7395}, 
     {name: "Sonoma State University", nick: "Sonoma State", ownership: "public", sys: "CalState", SATh: 1140, SATl: 930, tuition: 2226, room: 9606}, 
     {name: "California State University, Hayward", nick: "CalState Hayward", ownership: "public", sys: "CalState", SATh: 1050, SATl: 810, tuition: 1800, room: 6435}, 
     {name: "University of San Francisco", nick: "USF", ownership: "private", sys: "Roman Catholic", SATh: 1240, SATl: 1030, tuition: 21780, room: 9080}, 
     {name: "Santa Clara University", nick: "SCU", ownership: "private", sys: "Roman Catholic", SATh: 1300, SATl: 1110, tuition: 23445, room: 8904}, 
     {name: "Mills College", nick: "Mills College", ownership: "private", sys: "n/a", SATh: 1130, SATl: 920, tuition: 19482, room: 7832} 
     ); 

我應該如何創建一個數組這與使用JavaScript表?有些人可以help..am新本

+9

您是否嘗試過的東西? – 2012-07-25 10:17:15

+2

http://www.w3.org/wiki/Web_Standards_Curriculum#JavaScript_core_skills – Quentin 2012-07-25 10:20:43

+1

看起來像我的功課 – freefaller 2012-07-25 10:29:57

回答

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
</HEAD> 
<script> 
function tableView(){ 
var univArray = new Array(
{name: "Stanford University", nick: "Stanford", ownership: "private", sys: "n/a", SATh: 1550, SATl: 1360, tuition: 27204, room: 8680}, 
    {name: "University of California, Berkeley", nick: "UC Berkeley", ownership: "public", sys: "University of California", SATh: 1440, SATl: 1170, tuition: 4200, room: 10608}, 
    {name: "University of California, Santa Cruz", nick: "UC Santa Cruz", ownership: "public", sys: "University of California", SATh: 1270, SATl: 1030, tuition: 4384, room: 9708}, 
    {name: "San Francisco State University", nick: "SFSU", ownership: "public", sys: "CalState", SATh: 1120, SATl: 850, tuition: 1826, room: 6736}, 
    {name: "San Jose State University", nick: "SJSU", ownership: "public", sys: "CalState", SATh: 1140, SATl: 860, tuition: 1912, room: 7395}, 
    {name: "Sonoma State University", nick: "Sonoma State", ownership: "public", sys: "CalState", SATh: 1140, SATl: 930, tuition: 2226, room: 9606}, 
    {name: "California State University, Hayward", nick: "CalState Hayward", ownership: "public", sys: "CalState", SATh: 1050, SATl: 810, tuition: 1800, room: 6435}, 
    {name: "University of San Francisco", nick: "USF", ownership: "private", sys: "Roman Catholic", SATh: 1240, SATl: 1030, tuition: 21780, room: 9080}, 
    {name: "Santa Clara University", nick: "SCU", ownership: "private", sys: "Roman Catholic", SATh: 1300, SATl: 1110, tuition: 23445, room: 8904}, 
    {name: "Mills College", nick: "Mills College", ownership: "private", sys: "n/a", SATh: 1130, SATl: 920, tuition: 19482, room: 7832} 
    ); 
for (var i = 0; i < univArray.length; i++){addRow("dataTable",univArray[i].name,univArray[i].nick,univArray[i].ownership,univArray[i].sys,univArray[i].SATh,univArray[i].SATl,univArray[i].tuition,univArray[i].room); 
//alert(univArray[i].name); 
} 
} 
function addRow(tableID,name,nick,owner,sys,sath,sati,tuition,room) { 
var table = document.getElementById(tableID); 
var rowCount = table.rows.length; 

var row = table.insertRow(rowCount); 

var cell1 = row.insertCell(0); 
var element1 = document.createElement("input"); 
element1.type = "text"; 
cell1.appendChild(element1); 
cell1.innerHTML=name; 

var cell2 = row.insertCell(1); 
var element2 = document.createElement("input"); 
element2.type = "text"; 
cell2.appendChild(element2); 
cell2.innerHTML=nick; 

var cell3 = row.insertCell(2); 
var element3 = document.createElement("input"); 
element3.type = "text"; 
cell3.appendChild(element3); 
cell3.innerHTML=owner; 

var cell4 = row.insertCell(3); 
var element4 = document.createElement("input"); 
element4.type = "text"; 
cell4.appendChild(element4); 
cell4.innerHTML=sys; 

var cell5 = row.insertCell(4); 
var element5 = document.createElement("input"); 
element5.type = "text"; 
cell5.appendChild(element5); 
cell5.innerHTML=sath; 

var cell6 = row.insertCell(5); 
var element6 = document.createElement("input"); 
element6.type = "text"; 
cell6.appendChild(element6); 
cell6.innerHTML=sati; 

var cell7 = row.insertCell(6); 
var element7 = document.createElement("input"); 
element7.type = "text"; 
cell7.appendChild(element7); 
cell7.innerHTML=tuition; 

var cell8 = row.insertCell(7); 
var element8 = document.createElement("input"); 
element8.type = "text"; 
cell8.appendChild(element8); 
cell8.innerHTML=sath; 
} 
</script> 
<BODY onload='tableView();'> 

<TABLE id="dataTable" width="350px" border="1"> 
<TR> 
<TH>name</TH> 
<TH>nick</TH> 
<TH>ownership</TH> 
<TH>sys</TH> 
<TH>SATh</TH> 
<TH>SATi</TH> 
<TH>tuition</TH> 
<TH>room</TH> 
</TR> 

</TABLE> 
</BODY> 
</HTML> 

這工作正常,我