Question

我正在Javascript中制作一张表来进行天气预报。这是代码：

for (var i = 0; i < data.list.length; i++) {

  table += "<tr>";
  table += "<td>" + days[new Date(data.list[i].dt * 1000).getDay()] + "</td>";
  table += "</tr>";

  table += "<tr>";
  table += "<td><img src='img/" + data.list[i].weather[0].description + ".svg'></td>";
  table += "</tr>";

  table += "<tr>";
  table += "<td>" + data.list[i].weather[0].description + "</td>";
  table += "</tr>";

  table += "<tr>";
  table += "<td>" + Math.round(data.list[i].temp.day) + "&deg;</td>";
  table += "</tr>";
}

$("#forecastWeather").html(table);
$("#header").html(header);

$("#city").val('');

}

但是当我使用这段代码并在浏览器中打开html文件时，它就是这样的：

这就是它的外观：

出了什么问题？

Answer 1

试试这个：

table += "<tr>";
for (var i = 0; i < data.list.length; i++) {
  table += "<td>" + days[new Date(data.list[i].dt * 1000).getDay()]+"";
  table += "<img src='img/" + data.list[i].weather[0].description + ".svg'>";
  table += ""+ data.list[i].weather[0].description +"";
  table += "" + Math.round(data.list[i].temp.day) + "&deg;</td>";
}

table += "</tr>";

$("#forecastWeather").html(table);
$("#header").html(header);

$("#city").val('');

我只是在做表格逻辑，我真的不理解table +=这个事情，但是你想只有一个tr（行）并重复td。
如果需要，可以在每行中添加一个表，以便在一个td内可以有多个行：

table += "<tr>";
for (var i = 0; i < data.list.length; i++) {
table += "<td>";
table += "<table>";
  table += "<tr>";
  table += "<td>" + days[new Date(data.list[i].dt * 1000).getDay()] + "</td>";
  table += "</tr>";

  table += "<tr>";
  table += "<td><img src='img/" + data.list[i].weather[0].description + ".svg'></td>";
  table += "</tr>";

  table += "<tr>";
  table += "<td>" + data.list[i].weather[0].description + "</td>";
  table += "</tr>";

  table += "<tr>";
  table += "<td>" + Math.round(data.list[i].temp.day) + "&deg;</td>";
  table += "</tr>";
table += "</table>";
table += "</td>";
}
table += "</tr>";

$("#forecastWeather").html(table);
$("#header").html(header);

$("#city").val('');

Answer 2

由于解析<tr>和<td>元素的方式，它不会那样工作。 <tr> represents a row，使用您的代码，您最终会堆积所有内容。如果你真的想用表格来做，你必须创建一个带有日期（第一行）的<tr>元素，而不是另一个带有图像的元素，依此类推。

一般来说，您甚至不必使用<table>进行此类布局。您只能使用一行，或者更好的是，使用一堆浮动<div>。此外，混合HTML和Javascript代码并不是很优雅。在这种情况下，我会做那样的事情：

＆＃13;

var table = [
  {
    day: "Monday",
    img: "http://icons.iconarchive.com/icons/iynque/ios7-style/1024/Weather-icon.png",
    description: "Acceptable",
    temp: "20"
  },
  {
    day: "Tuesday",
    img: "https://maxcdn.icons8.com/Share/icon/color/Weather/windy_weather1600.png",
    description: "Windy",
    temp: "13"
  },
  {
    day: "Wednesday",
    img: "https://maxcdn.icons8.com/Share/icon/color/Weather/windy_weather1600.png",
    description: "Windy",
    temp: "16"
  }
  ]

for(var i in table) {
  
  // Select today forecast
  todayForecast = table[i];
  
  // Clone the pattern
  pattern = $('.pattern').clone()
  
  
  // Replace the vars
  pattern.find('.day').text(todayForecast.day)
  pattern.find('.description').text(todayForecast.description)
  pattern.find('.temp').text(todayForecast.temp)
  pattern.find('.img').attr('src', todayForecast.img)
  
  // Remove the pattern
  pattern.removeClass('pattern');
  
  pattern.appendTo('.dayWeatherBoard')
  
}

＆＃13;

.dayWeather {
  
  text-align: center;
  width: 20%;
 float: left;
  
}

.dayWeather img {
  
  width: 100px;
  height: 100px;
  
}

.pattern {
  
  display: none;
  
}

.dayWeather .day {
  
  font-weight: bold;
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dayWeatherBoard">
  <div class="dayWeather pattern">
    <p class="day"></p>
    <p><img class="img" src="" /></p>
    <p class="description"></p>
    <p class="temp"></p>
  </div>
</div>

＆＃13;

这样，我避免混合使用HTML和JS代码。考虑学习模板或MVVM库，如Vue.js或Angular。

Answer 3

这就是我要找的东西。谢谢大家的帮助。

＆＃13;

for(var i = 0; i < data.list.length; i++){

    table += "<tr>";
      for(var i = 0; i < data.list.length; i++){
        table += "<td>" + days[new Date(data.list[i].dt * 1000).getDay()] + "</td>";
      }
    table += "</tr>";

    table += "<tr>";
      for(var i = 0; i < data.list.length; i++){
        table += "<td><img src='img/icons/" + data.list[i].weather[0].description + ".svg'></td>";
      }
    table += "</tr>";

    table += "<tr>";
      for(var i = 0; i < data.list.length; i++){
        table += "<td>" + Math.round(data.list[i].temp.day) + "&deg;</td>";
      }
    table += "</tr>";


}

$("#forecastWeather").html(table);
$("#header").html(header);

$("#city").val('');

＆＃13;

在Javascript中创建表

3 个答案: