Meilleure façon d'afficher des valeurs de tableaux multidimensionnels dans une table en javascript

Je rencontre des problèmes pour afficher les valeurs de tableau dans le tableau que j'ai créé sous le programme. J'ai créé l'instance d'objets et de tableaux de ces instances. J'ai utilisé pour la boucle pour afficher les valeurs dans le tableau mais obtenir l'erreur: Quelqu'un peut-il m'aider à identifier un problème?Meilleure façon d'afficher des valeurs de tableaux multidimensionnels dans une table en javascript

résultat attendu:

https://i.stack.imgur.com/knetX.jpg

myoutput:

https://i.stack.imgur.com/UqDgC.png

<html> 
<head> 
    <title></title> 

    <script type="text/javascript"> 

     function Cruise(cruise_Date, cruise_Destination, cruise_URL, ship_Name, ship_Description, ship_url, the_price) { 
      this.cruise_Date = cruise_Date; 
      this.cruise_Destination = cruise_Destination; 
      this.cruise_URL = cruise_URL; 
      this.ship_Name = ship_Name; 
      this.ship_Description = ship_Description; 
      this.ship_url = ship_url; 
      this.price = the_price 
     } 



     function DisplayList(cruise_Date, cruise_Destination, ship_Name, the_price) { 

      this.date = cruise_Date; 
      this.destination = cruise_Destination; 
      this.ship = ship_Name; 
      this.price = the_price; 
      this.display = displayClass; 

     } 

     function displayClass(){ 

      document.write(this.date); 
      document.write(this.destination); 
      document.write(this.ship); 
      document.write(this.price); 
     } 


     var myCruise = new Cruise("13 Oct 2018", 

      "<a href ='#'> 3 Night Bahmas cruise </a>", 

      "Royal Caribbean", 

      '$' + 179); 

     var myCruise2 = new Cruise("13 Oct 2018", 

      "<a href = '#'> 4 Nights Baja Mexico Itinerary </a>", 

      "Carnival Inspiration", 

      '$' + 179); 

     var myCruise3 = new Cruise("13 Oct 2018", 

      "<a href = '#'>5 - Night Alaskan Cruise from Vancouver </a>", 

      "Disney Cruise Line", 

      '$' + 179); 

     instances = new Array(myCruise, myCruise2, myCruise3); 
     list = new Array("Departs", " Destination ", "Ship", "Price from"); 

    </script> 

</head> 
<body> 


    <table border="", align="center", cellpadding="8" > 
     <thead> 
      <tr> 
       <script type="text/javascript">for (i = 0; i < 4; i++) { 
        document.write('<th>'+ list[i] +'</th>'); 
       } 
      </script> 
     </tr> 
    </thead> 
    <tbody> 
      <tr> 
       <script type="text/javascript">    
       for (j = 0; j < 4; j++) { 
        document.write('<td>' + instances[j] + '</td>'); 
       } 

       </script> 
      </tr> 

     </tbody> 
    </table> 
</body> 
</html>

Source

2017-09-30 pari

Il y a quelques problèmes que je peux repérer dès le départ. Tout d'abord, votre méthode de croisière attend 7 paramètres mais vous ne le passer 4, et ils ne correspondent pas (par exemple, vous avez la valeur des prix étant affectée au paramètre nom):

function Cruise(cruise_Date, cruise_Destination, cruise_URL, ship_Name, ship_Description, ship_url, the_price) { 
[...] 
var myCruise = new Cruise("13 Oct 2018", 
      "<a href ='#'> 3 Night Bahmas cruise </a>", 
      "Royal Caribbean", 
      '$' + 179);

Ensuite, il est généralement recommandé de ne pas utiliser document.write. Je ne vais pas expliquer pourquoi, il y a beaucoup d'informations là-dessus, et bien que cela puisse fonctionner dans ce cas, ce n'est généralement pas une bonne pratique si cela peut être évité.

Étant donné que vous construisez le contenu de la table en JavaScript, avez-vous envisagé de stocker vos données en tant qu'objet de type JSON et en utilisant un modèle ES6 pour l'afficher? Cela nécessite d'ajouter le transpilateur babel à la page, mais ça vaut la peine de le faire pour profiter de JS/ES moderne et il vous permet de faire quelque chose de plus lisible/gérable comme ça (ce qui rend aussi plus facile si vous voulez de pousser vos données vers un fichier JSON externe):

HTML:

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="cruise"></div> 
</body> 
</html>

JavaScript:

const Cruises = [ 
    { 
    date: "13 Oct 2018", 
    destination: "3 Night Bahmas cruise", 
    url: "http://www.example.com", 
    name: "Royal Caribbean", 
    price: "179" 
    }, 
    { 
    date: "14 Oct 2018", 
    destination: "4 Nights Baja Mexico Itinerary", 
    url: "http://www.example.com", 
    name: "Carnival Inspiration", 
    price: "279" 
    }, 
    { 
    date: "15 Oct 2018", 
    destination: "5 - Night Alaskan Cruise from Vancouver", 
    url: "http://www.example.com", 
    name: "Disney Cruise Line", 
    price: "379" 
    } 
]; 

const h = `<table border="", align="center", cellpadding="8" > 
    <thead> 
    <tr> 
     <td>Departs</td><td>Destination</td><td>Ship</td><td>Price from</td> 
    </tr> 
    </thead> 
    <tbody> 
    ${ 
      Cruises.map(cruise => 
     `<tr> 
      <td>${cruise.date}</td> 
      <td><a href="${cruise.url}">${cruise.destination}</a></td> 
      <td><a href="${cruise.url}">${cruise.name}</a></td> 
      <td>$${cruise.price}</td> 
     </tr>` 
      ) 
    } 
    </tbody> 
</table>`; 
document.querySelector('#cruise').innerHTML = h;

Voici un Codepen de celui-ci.

Source

2017-09-30 03:10:26 delinear

Meilleure façon d'afficher des valeurs de tableaux multidimensionnels dans une table en javascript

Répondre

Questions connexes