2016-12-07 107 views
0

我正在創建一個網站,我調用一個函數,該函數將使用來自JSON對象的數據生成一個html表。這是我第一次嘗試去做。我無法獲得執行的功能。我測試過該功能是否啓動,但它沒有。創建一個html表來顯示來自JSON對象的數據

var alum = { "students2015" : [ 
 
    { "firstName" : "Zeynep", "lastName" : "Abalioglu", "university" : "Boston University" } + 
 
       { "firstName" : "Ata", "lastName" : "Aganoglu", "university" : "University of Exeter" } + 
 
       { "firstName" : "Ege", "lastName" : "Agca", "university" : "Universita Bocconi" } + 
 
       { "firstName" : "Doruk", "lastName" : "Akdas", "university" : "York University" } + 
 
       { "firstName" : "Batuhan", "lastName" : "Aksin", "university" : "University of Exeter" } + 
 
       { "firstName" : "Omer Alp", "lastName" : "Aksu", "university" : "The University of Texas at San Antonio" } + 
 
       { "firstName" : "Yosun", "lastName" : "Asal", "university" : "University of The Arts London - Central Saint Martins" } + 
 
       { "firstName" : "Yasemin", "lastName" : "Avci", "university" : "Northeastern University" } + 
 
       { "firstName" : "Yekta", "lastName" : "Baki", "university" : "University of Sheffield" } + 
 
       { "firstName" : "Anil", "lastName" : "Bakkaloglu", "university" : "Lehigh University" } + 
 
       { "firstName" : "Arda", "lastName" : "Budin", "university" : "Ryerson University" } + 
 
       { "firstName" : "Berke", "lastName" : "Cavusoglu", "university" : "HZ University of Applied Science" } + 
 
       { "firstName" : "Sena", "lastName" : "Cetindere", "university" : "University of Bristol" } + 
 
       { "firstName" : "Dilge", "lastName" : "Dilsiz", "university" : "Lafayette College" } + 
 
       { "firstName" : "Kerem", "lastName" : "Dogurga", "university" : "Emily Carr University Art and Design" } + 
 
       { "firstName" : "Alp", "lastName" : "Erselcan", "university" : "Semmelweis University" } + 
 
       { "firstName" : "Bora", "lastName" : "Guloglu", "university" : "University of Oxford" } + 
 
       { "firstName" : "Ilayda", "lastName" : "Gunduz", "university" : "University of Toronto" } + 
 
       { "firstName" : "Derin", "lastName" : "Guzel", "university" : "University of Pennsylvania" } + 
 
       { "firstName" : "Rena", "lastName" : "Hazan", "university" : "Boston University" } + 
 
       { "firstName" : "Joel", "lastName" : "Hemsi", "university" : "Brandeis University" } + 
 
       { "firstName" : "Begum", "lastName" : "Inal", "university" : "University of California, Santa Cruz" } + 
 
       { "firstName" : "Sude", "lastName" : "Karadinc", "university" : "King\'s College London" } + 
 
       { "firstName" : "Murat Can", "lastName" : "Kaya", "university" : "Pennsylvania State University" } + 
 
       { "firstName" : "Goksu", "lastName" : "Kayaalp", "university" : "Univresita Cattolica Del Sacro Cuore" } + 
 
       { "firstName" : "Defne", "lastName" : "Kaynak", "university" : "School of The Art Institute of Chicago" } + 
 
       { "firstName" : "Nursima", "lastName" : "Kazanci", "university" : "City University(F)" } + 
 
       { "firstName" : "Ozan", "lastName" : "Kokuludag", "university" : "Erasmus Universiteit Rotterdam" } + 
 
       { "firstName" : "Ozge", "lastName" : "Mentes", "university" : "University of Bath" } + 
 
       { "firstName" : "Gokhan", "lastName" : "Mungan", "university" : "University of California, Davis" } + 
 
       { "firstName" : "Kutay", "lastName" : "Nazli", "university" : "Pomona College" } + 
 
       { "firstName" : "Berfin", "lastName" : "Necimoglu", "university" : "Sciences Po" } + 
 
       { "firstName" : "Sarp", "lastName" : "Oktay", "university" : "University of Exeter" } + 
 
       { "firstName" : "Irmak", "lastName" : "Ozbek", "university" : "Universita Cattolica Del Sacro Cuore" } + 
 
       { "firstName" : "Serra", "lastName" : "Ozdemir", "university" : "Pratt Institute" } + 
 
       { "firstName" : "Berk", "lastName" : "Ozture", "university" : "University of Bristol" } + 
 
       { "firstName" : "Ella", "lastName" : "Polat", "university" : "Royal Holloway, University of London" } + 
 
       { "firstName" : "Efe", "lastName" : "Saatci", "university" : "Northwestern University" } + 
 
       { "firstName" : "Deniz", "lastName" : "Sutas", "university" : "University of Guelph" } + 
 
       { "firstName" : "Mustafa", "lastName" : "Tuntas", "university" : "Universita Bocconi" } + 
 
       { "firstName" : "Serra", "lastName" : "Turkun", "university" : "Parsons The School For Design" } + 
 
       { "firstName" : "Elif", "lastName" : "Ulusan", "university" : "Boston University" } + 
 
       { "firstName" : "Sueda", "lastName" : "Yurdadonen", "university" : "Karlsruhe Institute of Technology" }], 
 
      "students2014" : [ 
 
     { "firstName" : "Melis", "lastName" : "Uysal", "university" : "King's College London"} + 
 
       { "firstName" : "Melisa", "lastName" : "Ozen", "university" : "Columbia University"} + 
 
       { "firstName" : "Emre", "lastName" : "Pehlivan", "university" : "Goethe Institut"} + 
 
       { "firstName" : "Ali", "lastName" : "Tankurt", "university" : "University of British Columbia"} + 
 
       { "firstName" : "Kemal", "lastName" : "Gozegir", "university" : "Royal Holoway, University of London"} + 
 
       { "firstName" : "Arda", "lastName" : "Gulyapan", "university" : "University of Surrey"} + 
 
       { "firstName" : "Dogan", "lastName" : "Akad", "university" : "University of Toronto"} + 
 
       { "firstName" : "Ceren", "lastName" : "Korkut", "university" : "Bocconi University"} + 
 
       { "firstName" : "Ahmet Emre", "lastName" : "Harsa", "university" : "Dalhousie University"} + 
 
       { "firstName" : "Melodi Var", "lastName" : "Ongel", "university" : "Bennington College"} + 
 
       { "firstName" : "Basak", "lastName" : "Unligil", "university" : "University of Wisconsin, Milwakee"} + 
 
       { "firstName" : "Deniz", "lastName" : "Dokuzer", "university" : "Otis College of Art and Design"} + 
 
       { "firstName" : "Ada", "lastName" : "Dogrucu", "university" : "Worcester Polytechnic Institute"} + 
 
       { "firstName" : "Ahmet Uzay", "lastName" : "Sezer", "university" : "Syracuse University"} + 
 
       { "firstName" : "Selim", "lastName" : "Unsal", "university" : "University of Exeter"} + 
 
       { "firstName" : "Alara", "lastName" : "Kaynar", "university" : "University of Toronto"} + 
 
       { "firstName" : "Ayse", "lastName" : "Devecioglu", "university" : "Royal Holloway, University of London"} + 
 
       { "firstName" : "Emir", "lastName" : "Vurgun", "university" : "University of Exeter"} + 
 
       { "firstName" : "Ismet", "lastName" : "Genelioglu", "university" : "Royal Holloway, University of London"} + 
 
       { "firstName" : "Merve", "lastName" : "Yolcu", "university" : "Bentley University"} + 
 
       { "firstName" : "Zeynep", "lastName" : "Yeniceri", "university" : "Bocconi University"} + 
 
       { "firstName" : "Lidya", "lastName" : "Yengul", "university" : "Brandenburg University of Technology, Cottbus"} + 
 
       { "firstName" : "Timucin", "lastName" : "Oztepe", "university" : "City University"} + 
 
       { "firstName" : "Alp Eren", "lastName" : "Elci", "university" : "Northeastern University"} + 
 
       { "firstName" : "Ceylin", "lastName" : "Kocagoz", "university" : "Emerson College"} + 
 
       { "firstName" : "Caglar", "lastName" : "Ozkul", "university" : "University of Exeter"} + 
 
       { "firstName" : "Eda", "lastName" : "Seyok", "university" : "University of Edinburg"} + 
 
       { "firstName" : "Ismail", "lastName" : "Tiryaki", "university" : "University of Exeter"} + 
 
       { "firstName" : "Ogul Dogukan", "lastName" : "Ozen", "university" : "Politecnico di Milano"} + 
 
       { "firstName" : "Emily Su", "lastName" : "Akdogan", "university" : "University College Utrecht"} + 
 
       { "firstName" : "Deniz", "lastName" : "Amado", "university" : "Brandeis University"} + 
 
       { "firstName" : "Selen", "lastName" : "Amado", "university" : "Brandeis University"} + 
 
       { "firstName" : "Ece", "lastName" : "Ates", "university" : "Sarah Lawrence College"} + 
 
       { "firstName" : "Defne", "lastName" : "Erdinc", "university" : "Barnard College"} + 
 
       { "firstName" : "Yasemin", "lastName" : "Erdinc", "university" : "Barnard College"} + 
 
       { "firstName" : "Esra", "lastName" : "Koraltan", "university" : "Queen Mary, University of London"} + 
 
       { "firstName" : "Tuna", "lastName" : "Kunt", "university" : "University College London"} + 
 
       { "firstName" : "Leyla", "lastName" : "Kursat", "university" : "Tufts University"} + 
 
       { "firstName" : "Anna Maria", "lastName" : "Masautova", "university" : "University of Bristol"} + 
 
       { "firstName" : "Piril", "lastName" : "Ozgercin", "university" : "Science Po-Columbia Dual Program"} + 
 
       { "firstName" : "Ester", "lastName" : "Saba", "university" : "University of the Arts London"} + 
 
       { "firstName" : "Sevgi", "lastName" : "Secen", "university" : "European School of Economics"} + 
 
       { "firstName" : "Deniz", "lastName" : "Sokullu", "university" : "Carnegie Mellon University"} + 
 
       { "firstName" : "Kayra Sila", "lastName" : "Ozalp", "university" : "Hong Kong University of Science and Technology"} ], 
 
      "students2013" : [ 
 
     { "firstName" : "Gunce Beren", "lastName" : "Agirbas", "university" : "Semmelweis University"} + 
 
       { "firstName" : "Sandra", "lastName" : "Antebi", "university" : "Parsons School of Design"} + 
 
       { "firstName" : "Ogulcan", "lastName" : "Baloglu", "university" : "University of Edinburgh"} + 
 
       { "firstName" : "Emre", "lastName" : "Cubukcu", "university" : "University of Exeter"} + 
 
       { "firstName" : "İpek", "lastName" : "Ertan", "university" : "McGill University"} + 
 
       { "firstName" : "Elif", "lastName" : "Fotocan", "university" : "Pratt University"} + 
 
       { "firstName" : "Nusret", "lastName" : "İpek", "university" : "Arizona State University"} + 
 
       { "firstName" : "Mert", "lastName" : "Karakaya", "university" : "Purdue University"} + 
 
       { "firstName" : "Zeynep", "lastName" : "Kaserci", "university" : "University of Saint Andrews"} + 
 
       { "firstName" : "Cemrenaz", "lastName" : "Kuyumcu", "university" : "University of Bath"} + 
 
       { "firstName" : "Serra Baysun", "lastName" : "Onder", "university" : "Worcester Polytechnic Institute"} + 
 
       { "firstName" : "Bilgehan", "lastName" : "Saglik", "university" : "Wentworth Institute of Technology"} + 
 
       { "firstName" : "Ilayda", "lastName" : "Susluer", "university" : "Michigan State University"} + 
 
       { "firstName" : "Anita", "lastName" : "Savul", "university" : "Parsons School of Design"} + 
 
       { "firstName" : "Doruk", "lastName" : "Tort", "university" : "University of Surrey"} + 
 
       { "firstName" : "Gulce", "lastName" : "Tulcali", "university" : "Universita Bocconi"} + 
 
       { "firstName" : "Cansu", "lastName" : "Ulcay", "university" : "McGill University"} + 
 
       { "firstName" : "Ali Berkay", "lastName" : "Yaranolu", "university" : "University of Surrey"} + 
 
       { "firstName" : "Ece", "lastName" : "Zengin", "university" : "Rhode Island School of Design"}]}; 
 

 
function yearCheck(year) { 
 
    "use strict"; 
 
    year 
 
    var container = document.getElementById("table"), 
 
     table = document.createElement("TABLE"), 
 
     row, 
 
     i, 
 
     j, 
 
     tData, 
 
     tRow; 
 
    
 
    switch (year) { 
 
    case 2013: 
 
     for (i = 0; i < alum.students2013.length; i += 1) { 
 
      tRow = table.createElement("TR"); 
 
      for (j = 0; j < 3; j += 1) { 
 
       tData = table.createElement("TD"); 
 
       switch (j) { 
 
       case 0: 
 
        tData = alum.students2013[i].firstName; 
 
        tRow.appendChild(tData); 
 
        table.appendChild(tRow); 
 
        break; 
 
       case 1: 
 
        tData = alum.students2013[i].lastName; 
 
        tRow.appendChild(tData); 
 
        table.appendChild(tRow); 
 
        break; 
 
       case 2: 
 
        tData = alum.students2013[i].university; 
 
        tRow.appendChild(tData); 
 
        table.appendChild(tRow); 
 
        break; 
 
       } 
 
      } 
 
     } 
 
     container.appendChild(table); 
 
     break; 
 
    case 2014: 
 
     break; 
 
    case 2015: 
 
     break; 
 
    case 2016: 
 
     break; 
 
    default: 
 
     break; 
 
    } 
 
}
<body> 
 
     <div class="container" id="table"> 
 
      <script>document.getElementById("table").innerHTML = yearCheck(2013);</script> 
 
     </div> 
 
</body>

我加入了我如何在代碼中調用該函數。我試圖通過使用屬性onload =「」來調用函數。經過測試,我發現它甚至沒有啓動該功能。是否因爲函數調用中的參數?我在這裏先向您的幫助表示感謝。

+1

你是否試圖用'.innerHTML = yearCheck(2013)'移動該行;'從HTML中放出而是在腳本元素的末尾? (順便說一句,你的示例對象是否真的需要包含很多項目?請注意,[沒有像JSON對象那樣的東西](http://benalman.com/news/2010/03/theres-no-這樣的東西作爲一個JSON /),並沒有JSON在你的問題。 – nnnnnn

回答

0

var alum = { "students2015" : [ 
 
\t \t \t \t \t { "firstName" : "Zeynep", "lastName" : "Abalioglu", "university" : "Boston University" }, 
 
\t \t \t \t \t \t \t \t { "firstName" : "Ata", "lastName" : "Aganoglu", "university" : "University of Exeter" }, 
 
\t \t \t \t \t \t \t \t { "firstName" : "Ege", "lastName" : "Agca", "university" : "Universita Bocconi" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Doruk", "lastName" : "Akdas", "university" : "York University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Batuhan", "lastName" : "Aksin", "university" : "University of Exeter" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Omer Alp", "lastName" : "Aksu", "university" : "The University of Texas at San Antonio" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Yosun", "lastName" : "Asal", "university" : "University of The Arts London - Central Saint Martins" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Yasemin", "lastName" : "Avci", "university" : "Northeastern University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Yekta", "lastName" : "Baki", "university" : "University of Sheffield" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Anil", "lastName" : "Bakkaloglu", "university" : "Lehigh University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Arda", "lastName" : "Budin", "university" : "Ryerson University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Berke", "lastName" : "Cavusoglu", "university" : "HZ University of Applied Science" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Sena", "lastName" : "Cetindere", "university" : "University of Bristol" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Dilge", "lastName" : "Dilsiz", "university" : "Lafayette College" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Kerem", "lastName" : "Dogurga", "university" : "Emily Carr University Art and Design" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Alp", "lastName" : "Erselcan", "university" : "Semmelweis University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Bora", "lastName" : "Guloglu", "university" : "University of Oxford" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Ilayda", "lastName" : "Gunduz", "university" : "University of Toronto" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Derin", "lastName" : "Guzel", "university" : "University of Pennsylvania" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Rena", "lastName" : "Hazan", "university" : "Boston University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Joel", "lastName" : "Hemsi", "university" : "Brandeis University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Begum", "lastName" : "Inal", "university" : "University of California, Santa Cruz" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Sude", "lastName" : "Karadinc", "university" : "King\'s College London" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Murat Can", "lastName" : "Kaya", "university" : "Pennsylvania State University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Goksu", "lastName" : "Kayaalp", "university" : "Univresita Cattolica Del Sacro Cuore" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Defne", "lastName" : "Kaynak", "university" : "School of The Art Institute of Chicago" }, 
 
\t \t \t \t \t \t \t \t { "firstName" : "Nursima", "lastName" : "Kazanci", "university" : "City University(F)" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Ozan", "lastName" : "Kokuludag", "university" : "Erasmus Universiteit Rotterdam" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Ozge", "lastName" : "Mentes", "university" : "University of Bath" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Gokhan", "lastName" : "Mungan", "university" : "University of California, Davis" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Kutay", "lastName" : "Nazli", "university" : "Pomona College" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Berfin", "lastName" : "Necimoglu", "university" : "Sciences Po" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Sarp", "lastName" : "Oktay", "university" : "University of Exeter" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Irmak", "lastName" : "Ozbek", "university" : "Universita Cattolica Del Sacro Cuore" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Serra", "lastName" : "Ozdemir", "university" : "Pratt Institute" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Berk", "lastName" : "Ozture", "university" : "University of Bristol" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Ella", "lastName" : "Polat", "university" : "Royal Holloway, University of London" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Efe", "lastName" : "Saatci", "university" : "Northwestern University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Deniz", "lastName" : "Sutas", "university" : "University of Guelph" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Mustafa", "lastName" : "Tuntas", "university" : "Universita Bocconi" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Serra", "lastName" : "Turkun", "university" : "Parsons The School For Design" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Elif", "lastName" : "Ulusan", "university" : "Boston University" } , 
 
\t \t \t \t \t \t \t \t { "firstName" : "Sueda", "lastName" : "Yurdadonen", "university" : "Karlsruhe Institute of Technology" }], 
 
\t \t \t \t \t \t \t "students2014" : [], 
 
\t \t \t \t \t \t "students2013" : []}; 
 

 
\t \t \t \t function yearCheck(year) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t switch (year) { 
 
\t \t \t \t \t case 2015: 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t for (i = 0; i < alum.students2015.length; i++) { 
 
\t \t \t \t \t \t \t var msg=''; 
 
\t \t \t \t \t \t \t var bean=alum.students2015[i]; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t msg+='<td>'+(i+1)+'</td>'; 
 
\t \t \t \t \t \t \t msg+='<td>'+bean.firstName+'</td>'; 
 
\t \t \t \t \t \t \t msg+='<td>'+bean.lastName+'</td>'; 
 
\t \t \t \t \t \t \t msg+='<td>'+bean.university+'</td>'; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t $('#alum-table').append('<tr>'+msg+'</tr>'); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case 2014: 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case 2013: 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case 2016: 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t default: 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t } 
 
\t \t \t \t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="yearCheck(2015)">Click to fill with 2015 Data</button> 
 

 
<table id="alum-table"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First name</th> 
 
     <th>Last name</th> 
 
     <th>University</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

在這裏,你可以看到我用jQuery的這只是一個增強寫JavaScript的方式,或者你可以說一個快速簡潔的JavaScript庫。

注: - 如果使用的是完全相同的JSON作爲你的問題,然後 替換每加號(「+」)兩個JSON對象之間在JSON數組 用「」。

如果你仍然想用舊的方法去,那麼改變你的代碼如下,但爲此,你需要按照之前寫的說明。

var alum = { "students2015" : [], 
 
\t \t \t \t \t \t \t "students2014" : [], 
 
\t \t \t \t \t \t "students2013" : [ 
 
\t \t \t \t \t \t { "firstName" : "Gunce Beren", "lastName" : "Agirbas", "university" : "Semmelweis University"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Sandra", "lastName" : "Antebi", "university" : "Parsons School of Design"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Ogulcan", "lastName" : "Baloglu", "university" : "University of Edinburgh"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Emre", "lastName" : "Cubukcu", "university" : "University of Exeter"} , 
 
\t \t \t \t \t \t \t { "firstName" : "İpek", "lastName" : "Ertan", "university" : "McGill University"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Elif", "lastName" : "Fotocan", "university" : "Pratt University"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Nusret", "lastName" : "İpek", "university" : "Arizona State University"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Mert", "lastName" : "Karakaya", "university" : "Purdue University"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Zeynep", "lastName" : "Kaserci", "university" : "University of Saint Andrews"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Cemrenaz", "lastName" : "Kuyumcu", "university" : "University of Bath"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Serra Baysun", "lastName" : "Onder", "university" : "Worcester Polytechnic Institute"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Bilgehan", "lastName" : "Saglik", "university" : "Wentworth Institute of Technology"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Ilayda", "lastName" : "Susluer", "university" : "Michigan State University"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Anita", "lastName" : "Savul", "university" : "Parsons School of Design"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Doruk", "lastName" : "Tort", "university" : "University of Surrey"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Gulce", "lastName" : "Tulcali", "university" : "Universita Bocconi"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Cansu", "lastName" : "Ulcay", "university" : "McGill University"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Ali Berkay", "lastName" : "Yaranolu", "university" : "University of Surrey"} , 
 
\t \t \t \t \t \t \t { "firstName" : "Ece", "lastName" : "Zengin", "university" : "Rhode Island School of Design"}]}; 
 

 
\t \t \t \t function yearCheck(year) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t var container = document.getElementById("table"), 
 
\t \t \t \t \t \t table = document.createElement("TABLE"), 
 
\t \t \t \t \t \t row, 
 
\t \t \t \t \t \t i, 
 
\t \t \t \t \t \t j, 
 
\t \t \t \t \t \t tData, 
 
\t \t \t \t \t \t tRow; 
 
\t \t \t \t \t 
 
\t \t \t \t \t switch (year) { 
 
\t \t \t \t \t case 2013: 
 
\t \t \t \t \t \t for (i = 0; i < alum.students2013.length; i++) { 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t tRow = document.createElement("TR"); 
 
\t \t \t \t \t \t \t for (j = 0; j < 3; j += 1) { 
 
\t \t \t \t \t \t \t \t tData = document.createElement("TD"); 
 
\t \t \t \t \t \t \t \t switch (j) { 
 
\t \t \t \t \t \t \t \t case 0: 
 
\t \t \t \t \t \t \t \t \t tData.innerHTML = alum.students2013[i].firstName; 
 
\t \t \t \t \t \t \t \t \t tRow.appendChild(tData); 
 
\t \t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t \t \t case 1: 
 
\t \t \t \t \t \t \t \t \t tData.innerHTML = alum.students2013[i].lastName; 
 
\t \t \t \t \t \t \t \t \t tRow.appendChild(tData); 
 
\t \t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t \t \t case 2: 
 
\t \t \t \t \t \t \t \t \t tData.innerHTML = alum.students2013[i].university; 
 
\t \t \t \t \t \t \t \t \t tRow.appendChild(tData); 
 
\t \t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t table.appendChild(tRow); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t container.appendChild(table); 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case 2014: 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case 2015: 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case 2016: 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t default: 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t yearCheck(2013);
<body> 
 
     <div class="container" id="table"> 
 
     </div> 
 
</body>

使用加會讓如果你想嘗試再放入加在一個地方,看到了差距的元素檢測爲未定義.... 。

在你的方法中,你將值添加到元素的方式有點錯誤,因爲你正在改變元素的類型(至少這是我猜你首先定義它爲html元素,然後將其更改爲只是文本,然後嘗試將該文本附加爲元素,這是錯誤的方式)。

並且table.appendChild(tRow);不需要在每種情況下追加。我沒有嘗試過,但如果你走了它,它肯定不會產生你期望的代碼

0

看看這個,ui-grid。您可以使用多個選項輕鬆地將JSON數據綁定到表格中。

+1

那麼,爲什麼OP的代碼不工作? – nnnnnn

+0

我會檢查出來..謝謝。 –

0

爲什麼不使用VueJS(它的v-for標籤會將您的問題排序)並且很容易學習。它也將節省您的時間,因爲您不需要學習大量代碼就可以完成任務。基本上,這將是唯一的代碼,你將不得不寫

<table v-for="alumni in alum"> 
<thead> 
    <tr> 
     <th>First name</th> 
     <th>Last name</th> 
     <th>University</th> 
    </tr> 
</thead> 
<tbody> 
    <tr v-for="students in alumni"> 
     <td>{{ students.firstName }}</td> 
     <td>{{ students.lastName }}</td> 
     <td>{{ students.university }}</td> 
    </tr> 
</tbody> 

希望這有助於

+0

非常感謝!這工作,但從來沒有聽說過..再次感謝! –

相關問題