I have created array of movies object and other array of genres for the movies. Now I want to use loop to print data into table. Array of genres should be table heading and array of movies should be table data. I am trying to print two dimensional array into table in my javascript program but I am getting different output. I used table tag and accordingly all tags which requires to print data in table.But not getting output as requires.Could anyone please help me? Here is my code:
我为电影创建了一系列电影对象和其他类型的流派。现在我想使用循环将数据打印到表中。类型数组应该是表格标题,电影数组应该是表格数据。我试图在我的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:
After changing code output:
更改代码输出后:
3 个解决方案
#1
1
<!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>
#2
1
You might consider change this line
您可以考虑更改此行
<script type="text/javascript">
for (j = 0; j < 3; j++) {
document.write("<td>")
document.write(movie[j].display())
document.write("</td>")
}
</script>
#3
1
Edit using javascript template literals with images added to the movie object and removed displayClass function and changed out the hard coded 3 with movie.length and genre.length
使用javascript模板文字进行编辑,将图像添加到电影对象并删除displayClass函数,并使用movie.length和genre.length更改硬编码3
I think you want something like this:
我想你想要这样的东西:
<script type="text/javascript">
function movie(the_title, the_rating, the_price, img_path) {
this.title = the_title;
this.rating = the_rating;
this.price = the_price;
this.img = img_path;
}
var myMovie = new movie("Minions", "PG", '$' + 11.49,"https://images-na.ssl-images-amazon.com/images/M/MV5BMTg2MTMyMzU0M15BMl5BanBnXkFtZTgwOTU3ODk4NTE@._V1_UX182_CR0,0,182,268_AL_.jpg");
var myMovie2 = new movie("Terminator Genisys", 'PG - '+ 13, '$' + 11.99,"https://images-na.ssl-images-amazon.com/images/M/MV5BMjM1NTc0NzE4OF5BMl5BanBnXkFtZTgwNDkyNjQ1NTE@._V1_UX182_CR0,0,182,268_AL_.jpg");
var myMovie3 = new movie( "Taken 2", 'PG - '+ 13, '$' + 12.99,"https://images-na.ssl-images-amazon.com/images/M/MV5BMTkwNTQ0ODExOV5BMl5BanBnXkFtZTcwNjU3NDQwOA@@._V1_UX182_CR0,0,182,268_AL_.jpg");
genre = new Array("Comedy", "Science Fiction", "Drama");
movie = new Array(myMovie, myMovie2, myMovie3);
</script>
<body>
</head>
<table border="2", align="center">
<thead>
<script type="text/javascript">
let tableHead = "";
let tableBody = "";
for (i = 0; i < genre.length; i++) {
tableHead +=`<th> ${genre[i]} </th> `
};
tableHead += `</thead>`
tableBody = `<tbody><tr>`
for (j = 0; j < movie.length; j++) {
tableBody +=
`<td><span style='color:black; font-size: 120%'> Title : </span>${movie[j].title}<br>
<span style='color:black; font-size: 120%'> Rating : </span>${movie[j].rating}<br>
<span style='color:black; font-size: 120%'> Price : </span>${movie[j].price}<br>
<img src="${movie[j].img}">
</td>`
};
tableBody += `</tr></tbody></table>`
document.write(tableHead + tableBody);
</script>
#1
1
<!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>
#2
1
You might consider change this line
您可以考虑更改此行
<script type="text/javascript">
for (j = 0; j < 3; j++) {
document.write("<td>")
document.write(movie[j].display())
document.write("</td>")
}
</script>
#3
1
Edit using javascript template literals with images added to the movie object and removed displayClass function and changed out the hard coded 3 with movie.length and genre.length
使用javascript模板文字进行编辑,将图像添加到电影对象并删除displayClass函数,并使用movie.length和genre.length更改硬编码3
I think you want something like this:
我想你想要这样的东西:
<script type="text/javascript">
function movie(the_title, the_rating, the_price, img_path) {
this.title = the_title;
this.rating = the_rating;
this.price = the_price;
this.img = img_path;
}
var myMovie = new movie("Minions", "PG", '$' + 11.49,"https://images-na.ssl-images-amazon.com/images/M/MV5BMTg2MTMyMzU0M15BMl5BanBnXkFtZTgwOTU3ODk4NTE@._V1_UX182_CR0,0,182,268_AL_.jpg");
var myMovie2 = new movie("Terminator Genisys", 'PG - '+ 13, '$' + 11.99,"https://images-na.ssl-images-amazon.com/images/M/MV5BMjM1NTc0NzE4OF5BMl5BanBnXkFtZTgwNDkyNjQ1NTE@._V1_UX182_CR0,0,182,268_AL_.jpg");
var myMovie3 = new movie( "Taken 2", 'PG - '+ 13, '$' + 12.99,"https://images-na.ssl-images-amazon.com/images/M/MV5BMTkwNTQ0ODExOV5BMl5BanBnXkFtZTcwNjU3NDQwOA@@._V1_UX182_CR0,0,182,268_AL_.jpg");
genre = new Array("Comedy", "Science Fiction", "Drama");
movie = new Array(myMovie, myMovie2, myMovie3);
</script>
<body>
</head>
<table border="2", align="center">
<thead>
<script type="text/javascript">
let tableHead = "";
let tableBody = "";
for (i = 0; i < genre.length; i++) {
tableHead +=`<th> ${genre[i]} </th> `
};
tableHead += `</thead>`
tableBody = `<tbody><tr>`
for (j = 0; j < movie.length; j++) {
tableBody +=
`<td><span style='color:black; font-size: 120%'> Title : </span>${movie[j].title}<br>
<span style='color:black; font-size: 120%'> Rating : </span>${movie[j].rating}<br>
<span style='color:black; font-size: 120%'> Price : </span>${movie[j].price}<br>
<img src="${movie[j].img}">
</td>`
};
tableBody += `</tr></tbody></table>`
document.write(tableHead + tableBody);
</script>