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
}

配列全体をテーブルに表示するには、最初にページにHTMLテンプレートを複製し、jQueryを使用して動的にデータを追加することで、forループをループしてテーブルのtdセルにデータを入力します。この手法の利点は、サーバー側で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 に答える