Question

我有这段代码：

for (var i = 0; i < data.times.length; ++i) {
    var time = formatTime(data.times[i].time);
    tableContent += '<tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr>'
    // laat vertragingen zien (BETA)
    if (data.times[i].delay / 60 >= 1) {
        $('#appendLate' + i + '').append("+" + data.times[i].delay / 60).addClass("late");
    }
}
table.html(tableContent);
}

if语句附加内容并添加一个类。我知道它不会像这样工作..但我似乎无法得到它如何工作..可以有人帮助吗？

现场直播：http://codepen.io/shiva112/pen/JGXoVJ?editors=001

Answer 1

嗯，你基本上差不多了。正确的方法是在进行任何DOM操作之前构建整个字符串，因为DOM操作非常慢（相对）。

假设您的index.html如下：

<html>
<head>
  <title>Cool site!</title>
</head>
<body>
  <table id="myCoolTable"></table>
</body>
</html>

然后你的JavaScript就变成了：

var tableContent = '';
for (var i = 0; i < data.times.length; ++i) {
  var time = formatTime(data.times[i].time);

  tableContent += '<tr>'
                    + '<td>' + data.times[i].destination.name + '</td>';

  if (data.times[i].delay / 60 >= 1) {
    tableContent += '<td id=\'appendLate\'' + i + ' class=\'late\'>' + time + '</td>' + '+' + (data.times[i].delay / 60);
  } else {
    tableContent += '<td id=\'appendLate\'' + i + '>' + time + '</td>';
  }

  tableContent += '<td id=\'appendLate\'' + i + '>' + time + '</td>'
                + '<td>' + data.times[i].track + '</td>'
                + '<td>' + data.times[i].train_type + '</td>'
                + '<td>' + data.times[i].company + '</td>'
                + '</tr>';
}

$('#myCoolTable').html(tableContent);

这样做是为整个表构建HTML。然后只更新一次表。希望它有所帮助！

我如何追加这个功能？

1 个答案: