我已经创建了电影对象数组和其他电影类型数组。现在我想使用循环将数据打印到表中。类型数组应该是表标题，电影数组应该是表数据。我正在尝试将二维数组打印到我的 javascript 程序中的表中，但我得到了不同的输出。我使用了表格标签以及相应的所有需要在表格中打印数据的标签。但没有按要求获得输出。有人可以帮助我吗？这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title> Lab 7 </title>
<meta charset="utf-8">
<h1 style="font-family: monospace; text-align: center;
text-shadow:
1.5em .4em 10vw orange,
0 0 10vw gold;
font-size: 3vw;"> Movies Inventory </h1>
<script type="text/javascript">
function movie(the_title, the_rating, the_price) {
this.title = the_title;
this.rating = the_rating;
this.price = the_price;
this.display = displayClass;
}
function displayClass() {
document.write("<span style='color:black; font-size: 120%'> Title : </span>", this.title + "<br>");
document.write("<span style='color:black; font-size: 120%'> Rating : </span>", this.rating + "<br>");
document.write("<span style='color:black; font-size: 120%'> Price : </span>", this.price + "<br>");
document.write('<br />');
}
var myMovie = new movie("Minions", "PG", '$' + 11.49);
var myMovie2 = new movie("Terminator Genisys", 'PG - '+ 13, '$' + 11.99);
var myMovie3 = new movie( "Taken 2", 'PG - '+ 13, '$' + 12.99);
var myMovie4 = new movie("Ted 2", "R", '$' + 13.49);
var myMovie5 = new movie ("Jurassic World", 'PG - '+ 13, '$' + 12.49);
var myMovie6 = new movie("True Story", "R", '$' + 12.99);
var myMovie7 = new movie("The Intern", 'PG -' + 13, '$' + 12.49);
var myMovie8 = new movie("Edge of Tomorrow", 'PG -' + 13, '$' + 12.99 );
var myMovie9 = new movie("Concussion", 'PG -' + 13, '$' + 13.49 );
genre = new Array("Comedy", "Science Fiction", "Drama");
movie = new Array(myMovie, myMovie2, myMovie3);
movie2 = new Array(myMovie4, myMovie5, myMovie6);
movie3 = new Array(myMovie7, myMovie8, myMovie9);
document.write("<span style ='text-align: center; font-size: 160%; font-family:monospace'> Number of genres in the inventory: </span> " + genre.length); document.write('<br />'); document.write('<br />'); document.write('<br />');
</script>
body{
background-image: url(lab7_images/back.jpg);
height: 100%;
/*background-repeat: no-repeat;*/
background-size: cover;
text-align: center;
font-family: Courier, monospace;
}
html.js {
font-size: 120%;
font-weight: bold;
color: black;
border-style: double;
}
span{
color: #000;
font-size: 120%;
font-family: Courier, monospace;
}
</style>
</head>
<script type="text/javascript">
</script>
</table>
output:
更改代码输出后:
最佳答案
<!DOCTYPE html>
<html>
<head>
<title> Lab 7 </title>
<meta charset="utf-8">
<h1 style="font-family: monospace; text-align: center;
text-shadow:
1.5em .4em 10vw orange,
0 0 10vw gold;
font-size: 3vw;"> Movies Inventory </h1>
<script type="text/javascript">
function movie(the_title, the_rating, the_price) {
this.title = the_title;
this.rating = the_rating;
this.price = the_price;
this.display = displayClass;
}
function displayClass(){
document.write("<span style='color:black; font-size: 120%'> Title : </span>", this.title + "<br>");
document.write("<span style='color:black; font-size: 120%'> Rating : </span>", this.rating + "<br>");
document.write("<span style='color:black; font-size: 120%'> Price : </span>", this.price + "<br>");
document.write('<br />');
}
var myMovie = new movie("Minions", "PG", '$' + 11.49);
var myMovie2 = new movie("Terminator Genisys", 'PG - '+ 13, '$' + 11.99);
var myMovie3 = new movie( "Taken 2", 'PG - '+ 13, '$' + 12.99);
var myMovie4 = new movie("Ted 2", "R", '$' + 13.49);
var myMovie5 = new movie ("Jurassic World", 'PG - '+ 13, '$' + 12.49);
var myMovie6 = new movie("True Story", "R", '$' + 12.99);
var myMovie7 = new movie("The Intern", 'PG -' + 13, '$' + 12.49);
var myMovie8 = new movie("Edge of Tomorrow", 'PG -' + 13, '$' + 12.99 );
var myMovie9 = new movie("Concussion", 'PG -' + 13, '$' + 13.49 );
genre = new Array("Comedy", "Science Fiction", "Drama");
movie = new Array(myMovie, myMovie2, myMovie3);
movie2 = new Array(myMovie4, myMovie5, myMovie6);
movie3 = new Array(myMovie7, myMovie8, myMovie9);
images = new Array("https://i.pinimg.com/originals/25/21/d6/2521d66145c91e8e49e20b9649e7d4a7.jpg", "image_2_url", "image_3_url");
images2 = new Array("image_4_url", "image_5_url", "image_6_url");
images3 = new Array("image_7_url", "image_8_url", "image_9_url");
</script>
</head>
<body>
<table border="2", align="center">
<tr>
<script type="text/javascript">for (i = 0; i < 3; i++) {
document.write('<th>'+genre[i]+'</th>') }
</script>
</tr>
<tr>
<script type="text/javascript">for (j = 0; j < 3; j++) {
document.write("<td>")
movie[j].display();
document.write("<img src='")
document.write(images[j])
document.write(" '")
document.write(" width='200' height='200' ")
document.write(" > ")
document.write("</td>")}
</script>
</tr>
<tr>
<script type="text/javascript">for (j = 0; j < 3; j++) {
document.write("<td>")
movie2[j].display();
document.write("<img src='")
document.write(images2[j])
document.write(" '")
document.write(" width='200' height='200' ")
document.write(" > ")
document.write("</td>")}
</script>
</tr>
<tr>
<script type="text/javascript">for (j = 0; j < 3; j++) {
document.write("<td>")
movie3[j].display();
document.write("<img src='")
document.write(images3[j])
document.write(" '")
document.write(" width='200' height='200' ")
document.write(" > ")
document.write("</td>")}
</script>
</tr>
</table>
关于javascript - 以表格格式打印二维数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46354473/