表示アレイは、私が何をしようとしているの

Question

だけで簡単に短い例をオブジェクト？アレイ内には無差別に数が存在することがあります。

このようなHTMLマークアップはどのように見えますか？そして、それをデータで埋めるためにどのようにスクリプト化しますか？

Answer 1

要素の数やその他のことがわからない場合は、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 2

サラマンダーオブジェクトのコレクションがあり、特定のオブジェクトのサラマンダーオブジェクトのインデックスを検索するとします。

あなたが特定のプロパティを持つアイテムをループに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 3

を：

• http://jsfiddle.net/8EkQ5/

滑らかなwたとえば、JavaScriptのテンプレートを使用してこれを行うays。しかし、これはあなたの状況に適しているようです。ここ

スニペット：

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;