生成在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”，您将获得你想要的输出。