1

重複の可能性:
jQuery で動的にテーブルを作成する

と の 2 つの配列がletters = [A,B,C,...]あり、ヘッダーと最初のエントリとしてnumbers = [1,2,3,...]html テーブルを生成したいと考えています(そして、持っている値を入力できます)。これは一般的な配列で可能ですか?numbersletters

つまり、次の図のようになります。

<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>​
4

2 に答える 2

1

さて、最初に思いついた方法は次のとおりです。

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 メソッドのみを使用します。それらのいずれかがわからない場合は、どこを見ればよいかがわかります...

于 2012-07-16T11:01:43.777 に答える
1

これをお試し下さい ：

    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」と警告してください。目的の出力が得られます。

于 2012-07-16T11:08:38.883 に答える