我正在创建一个网站，我在其中调用一个函数，该函数将使用来自JSON对象的数据生成html表。这是我第一次尝试这样做。我无法获得执行的功能。我已经测试了函数是否启动，但它没有。
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 =“”来调用该函数。经过测试，我发现它甚至没有启动该功能。是因为函数调用中的参数？感谢您的帮助。
答案 0 :(得分：0)
看看这个，ui-grid。您可以使用多个选项轻松地将JSON数据绑定到表中。
答案 1 :(得分：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>
希望这有帮助
答案 2 :(得分：0)
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" : [],
"students2013" : []};
function yearCheck(year) {
switch (year) {
case 2015:
for (i = 0; i < alum.students2015.length; i++) {
var msg='';
var bean=alum.students2015[i];
msg+='<td>'+(i+1)+'</td>';
msg+='<td>'+bean.firstName+'</td>';
msg+='<td>'+bean.lastName+'</td>';
msg+='<td>'+bean.university+'</td>';
$('#alum-table').append('<tr>'+msg+'</tr>');
}
break;
case 2014:
break;
case 2013:
break;
case 2016:
break;
default:
break;
}
}<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对象之间的每个加号（＆＃34; +＆＃34;） 用＆＃34;，＆＃34;。
如果您仍想使用旧方法，请按照以下方式更改代码，但为此您需要按照之前的说明进行操作。
var alum = { "students2015" : [],
"students2014" : [],
"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) {
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++) {
tRow = document.createElement("TR");
for (j = 0; j < 3; j += 1) {
tData = document.createElement("TD");
switch (j) {
case 0:
tData.innerHTML = alum.students2013[i].firstName;
tRow.appendChild(tData);
break;
case 1:
tData.innerHTML = alum.students2013[i].lastName;
tRow.appendChild(tData);
break;
case 2:
tData.innerHTML = alum.students2013[i].university;
tRow.appendChild(tData);
break;
}
}
table.appendChild(tRow);
}
container.appendChild(table);
break;
case 2014:
break;
case 2015:
break;
case 2016:
break;
default:
break;
}
}
yearCheck(2013);<body>
<div class="container" id="table">
</div>
</body>
使用plus将使您的元素检测为未定义.... 如果你想尝试然后把加号放在一个地方，看看差异。
在你的方法中，当你改变元素的类型时，你向元素追加值的方式有点不对（至少那是我猜你首先将它定义为html元素然后改变它只是文本然后尝试将该文本作为元素附加。这在某种程度上是错误的。）。
在每种情况下都不需要附加table.appendChild(tRow);。我没有尝试过，但如果你继续使用它肯定不会产生你期望的代码