Question

只是我正在尝试做的一个简短的例子：

Salamander = {
    Name: getName(),
    SvLength: getSvLength(),
    TotLength: getTotLength()
};

aSal.push(Salamander);

在屏幕上显示可变数量的Salamanders数据的最佳方法是什么？数组中可以有不加区分的数量。

对于类似的内容，HTML标记甚至会是什么样的？我如何编写脚本以填充数据？

Answer 1

我假设您有一个Salamander对象的集合，并且您想要找到特定对象的salamander对象的索引。

您可以使用for循环来循环到具有特定属性的项目：

function getIndexForName(name) {
    for(var i = 0; i < aSal.length; i++) {
        if(aSal[i].Name == name) {
            return i;
        }
    }
    return -1; // not found
}

要在表格中显示整个数组，您可以循环遍历for循环并填充表格td单元格，首先在页面上克隆HTML模板，然后使用jQuery动态添加数据。这种技术的优点是您可以执行此操作，而无需在服务器端生成HTML。

<table id="salamanders">
    <tr>
        <th>Index</th>
        <th>Name</th>
        <th>SvLength</th>
        <th>TotLength</th>
    </tr>
    <tr class="item">
         <td></td>
    </tr>
</table>

var tr = $('#salamanders').find("tr:last").clone();
var td = $('#salamanders').find("td").clone();


$('#salamanders').find("td").remove();
$('#salamanders').find("tr:last").remove();

for(var i = 0; i < aSal.length; i++) {
    // clone the tr element from earlier and insert into the table.
    $('#salamanders').append(tr.clone());

    // insert the index
    $('#salamanders').find("tr:last").append(td.clone());
    $('#salamanders').find("td:last").innerHTML = i;

    // insert the name
    $('#salamanders').find("tr:last").append(td.clone());
    $('#salamanders').find("td:last").innerHTML = aSal[i].Name;

    // insert SvLength
    $('#salamanders').find("tr:last").append(td.clone());
    $('#salamanders').find("td:last").innerHTML = aSal[i].SvLength;

    // insert TotLength
    $('#salamanders').find("tr:last").append(td.clone());
    $('#salamanders').find("td:last").innerHTML = aSal[i].TotLength;       
}

这绝对有助于您入门。

Answer 2

如果您不知道元素的数量或其他任何内容，则需要动态创建HTML。

做这样的事情，你如何对我们进行标记，但你明白了这一点：

var output;

$.each(aSal, function(index, item) {
    output += '<ul class="salamander_wrapper">';
    output += '<li class="name">'+this.Name+'</li>';
    output += '<li class="length">'+this.SvLength+'</li>';
    output += '<li class="tot_length">'+this.TotLength+'</li>';
    output += '</ul>';
});

$(output).appendTo('body');

FIDDLE

Answer 3

看看这个小提琴：

http://jsfiddle.net/8EkQ5/

有一些更简单的方法可以使用，例如，javascript模板。但这似乎适合你的情况。

这里的代码段：

var tableHtml = "<table border='1'>";
for (var i = 0; i < rando; i++) {
   tableHtml += "<tr><td>"+newArray[i]+"</td></tr>";
}
tableHtml += "</table>";

document.getElementById("tableholder").innerHTML = tableHtml;

显示JavaScript对象的数组

3 个答案: