javascript - 将数据加载到 HTML 中的可变高度表

Question

我正在使用 ASP.NET 创建 Web 应用程序。正在使用 JS、JQuery、CSS 和 HTML。 Web 开发的新手，所以如果您有一些好的资源可以阅读，我们将不胜感激。

我正在使用 Google Maps API 绘制一些位置。我创建了一个侧边栏，我想列出附近的属性(最终可以点击)。这是我的两个问题:

1) 如何加载所有属性？目前我的代码只显示第一个。下面的JS代码只列出了最后一个位置。在 HTML 中，我使用以下标签:

<label id ="SidebarLabelName"></label>

在 JS 中:

for (i = properties.length - 1; i >= 0 ; i--) {
    var displayNum = i + 1;
    SidebarLabelName.text(displayNum + ")  " + properties[i]);
}

2) 如何创建行数可变的表？例如，如果我有 10 个属性要显示在我的侧 Pane 中，那么我需要 10 行。我也想要页面；如果我有 30 个属性要列出，第一页上有 26 个元素(google maps api 将字母字符限制为标签标记)，下一页上有 4 个。

感谢您的帮助。

Answer 1

问题 1: 您拥有的代码会为每个属性覆盖 SidebarLabelName 中的文本，这就是为什么您只看到最后一个属性的原因。这可以通过以下代码修复:

var allprops = "";
for (i = properties.length - 1; i >= 0 ; i--) {
    var displayNum = i + 1;
    allprops = allprops + "(" + displayNum + ")  " + properties[i]);
}
SidebarLabelName.text(allprops);

问题 2: 解决这个问题的方法之一是使用与上述相同的方法:

HTML代码

<div id ="tableDiv"></div>

和JS代码:

var allpropRows = "";
for (i = properties.length - 1; i >= 0 ; i--) {
    var displayNum = i + 1;
    allpropRows = allpropRows + "<tr> <td> (" + displayNum + ")  " + properties[i] + "</td> </tr>");
}
tableDiv.html( "<table>" + allpropRows + "</table>"); 

希望这对您有所帮助!