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个参数，并且它们不匹配（例如，您将价格值分配给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 个答案: