0

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

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

aSal.push(Salamander);

在屏幕上显示可变数量的蝾螈数据的最佳方式是什么？数组中可以有不加选择的数量。

对于这样的东西，HTML 标记甚至会是什么样子？我将如何编写脚本来填充数据？

4

3 回答 3

0

我假设您有一个蝾螈对象的集合，并且您想要查找特定对象的蝾螈对象的索引。

您可以使用 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;       
}

这绝对可以帮助您入门。

于 2012-05-06T22:15:15.940 回答
0

如果您不知道元素的数量或其他任何事情，则需要动态创建 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');

小提琴

于 2012-05-06T22:16:19.917 回答
0

看看这个小提琴：

有一些更巧妙的方法可以做到这一点，例如，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;
于 2012-05-06T22:17:00.733 回答