生成在JavaScript中的表/ jQuery的

Question

可能重複：
Creating tables dynamically in jQuery

我有兩個陣列，letters = [A,B,C,...]和numbers = [1,2,3,...]，並希望產生與numbers作爲頭一個HTML表格和letters作爲第一個條目（然後我可以用我有的值填充它）。 這是普通數組可能嗎？

也就是說，如下圖所示：

<table> 
    <thead> 
    <tr> 
     <th></th> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr id="A"> 
     <td>A</td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr id="B"> 
     <td>B</td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr id="C"> 
     <td>C</td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    </tbody> 
</table>​ 

Answer 1

OK，下面是浮現在腦海的第一種方式：

var letters = ["A","B","C"], 
    numbers = [1,2,3], 
    $table = $("<table/>"), 
    $body = $("<tbody/>").appendTo($table), 
    $row = $("<tr><th></th></tr>"); 

$.each(numbers,function(i,val){ 
    $("<th/>").text(val).appendTo($row); 
}); 
$("<thead/>").append($row).appendTo($table); 

$.each(letters, function(i,val) { 
    $row = $("<tr/>").attr("id",val).appendTo($body); 
    $("<td/>").text(val).appendTo($row); 
    for (var j = 0; j < numbers.length; j++) 
    $row.append("<td/"); 
}); 

$table.appendTo("body"); 

演示：http://jsbin.com/ocomit/edit#javascript,html,live

是的，它可能是漂亮， /或更高效。這僅使用非常基本的jQuery方法 - 如果你不知道任何人，你知道where to look ......

Answer 2

請試試這個：

var html = ''; 
    letters = [A,B,C]; 
    numbers = [1,2,3]; 
    html+= "<table><thead><tr><th></th>"; 
    for(i=0;i<letters.length;i++) 
     html+="<th>"++letters[i]"</th>"; 
    html+= "</tr></thead>"; 
    html+= "<tbody>"; 
    for(j=0;j<numbers.length;j++) 
    { 
     html+="<tr id='"+numbers[j]+"'>"; 
     html+="<td>"+numbers[j]+"</td>"; 
     for(k=1;k<letters.length;k++) 
      html+= "<td></td>"; 
     html+= "</tr>"; 
    }  
    html+= "</tbody>"; 
    html+= "</table>"; 

並請提醒「HTML」，您將獲得你想要的輸出。