在JavaScript中的表格中显示多维数组值的最佳方法

Question

我在程序下方创建的表中显示数组值时遇到问题。 我创建了对象实例和这些实例的数组。 我用于循环以在表中显示值，但出现错误：有人可以帮助我确定问题吗？

预期输出：

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>

Answer 1

我可以马上发现几个问题。 首先，您的Cruise方法需要7个参数，但只传递4个参数，并且它们不匹配（例如，您将price值分配给了name参数）：

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

接下来，通常建议不要使用document.write。 我不会讨论为什么，那里有很多信息，虽然在这种情况下可能会起作用，但如果可以避免，通常不是好的做法。

由于无论如何都是用JavaScript构建表内容的，因此您是否考虑过将数据存储为JSON类型对象并使用ES6模板显示它？ 它需要在页面上添加babel编译器，但是无论如何要利用现代JS / ES都是值得的，并且它可以使您进行更具可读性/可管理性的操作（例如，如果您想将您的数据推送到外部JSON文件）：

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;

这是它的Codepen 。

在JavaScript中的表格中显示多维数组值的最佳方法

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-30 03:10:26

在JavaScript中的表格中显示多维数组值的最佳方法

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-30 03:10:26

解决方案1
0 已采纳 2017-09-30 03:10:26