以表格式打印二维数组

时间：2017-09-21 23:07:03

标签： javascript arrays

我为电影创建了一系列电影对象和其他类型的流派。现在我想使用循环将数据打印到表中。类型数组应该是表格标题，电影数组应该是表格数据。我试图在我的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:

更改代码输出后：

enter image description here

3 个答案:

答案 0 :(得分：1)

您可以考虑更改此行

<script type="text/javascript">
for (j = 0; j < 3; j++) { 
    document.write("<td>")
    document.write(movie[j].display()) 
    document.write("</td>")

}
</script>

答案 1 :(得分：1)

使用javascript模板literals进行编辑，将图片添加到电影对象并删除displayClass函数，并使用movie.length和genre.length更改硬编码3

我想你想要这样的东西：

  <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>

答案 2 :(得分：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>
相关问题
最新问题