2012-07-16 3 views
1

가능한 중복 :
Creating tables dynamically in jQuery/jQuery를

나는 두 배열, letters = [A,B,C,...]numbers = [1,2,3,...]이 있고, 헤더 등 numbers와 HTML 테이블을 생성하고 싶습니다 첫 번째 항목으로 letters을 입력하면 (그리고 내가 가지고있는 값으로 채울 수 있습니다). 일반 배열에서는 가능합니까? 아래 그림과 같이,이다

:

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

예는 예뻐 할 수 있고

<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>​ 
+0

_ "일반 배열에서는 가능합니까?"- 물론. 지금까지 뭐 해봤 어? – nnnnnn

+0

@DrColossos eeep, "중복"은 끔찍한 것처럼 보입니다. –

+0

@hayden 게시 된 코드는 아니지만) 답변에서 제안 된 아이디어는 ... 필자가 게시 한 코드는 사용하지 않지만 솔루션은 실행 가능한 IMO입니다. – DrColossos

답변

1

OK, 여기에 마음에 온 첫 번째 방법이다/또는보다 효율적입니다. 이것은 매우 기초적인 jQuery를 방법을 사용 - 당신이 where to look을 알고 그들 중 확실하지 않은 경우 ...

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"당신이 얻을 것이다하시기 바랍니다 원하는 출력.

+0

나는 그의 질문을 잘못 읽은 것을 제외하고 자바 스크립트 전용 솔루션을 사용하기 위해 +1하겠다. 그는 테이블 데이터의 머리글과 글자에있는 숫자를 원했습니다. – davidethell