jQuery에서 DOM을 사용하여 테이블을 만드는 방법은 무엇입니까?

나는 다음과 같은 변수가 :jQuery에서 DOM을 사용하여 테이블을 만드는 방법은 무엇입니까?

var cars = [ 
     {model: "BMW", count: 23, details: "<p>I like <b>X6</b> from Germany</p>"}, 
     {model: "Hyundai", count: 30, details: "<p>I have <b>Verna</b> from Korea</p>"}, 
     {model: "Toyota", count: 08, details: "<p>Small <b>Yaris</b> from Japan</p>"}, 
     {model: "Fiat", count: 12, details: "<p>Latest <b>500c</b> from Italy</p>"} 
    ]

내가 다음, 'BMW (23)'전용 모델, 단 3 열이있는 테이블을 생성되는 표시를하고과 같이 계산하려고 해요 때 'BMW'를 클릭하면 '자세히'를 보여주는 HTML 페이지가 열립니다.

내가 How do I create HTML table using jQuery dynamically? 살펴 보았다하지만 난 requrienment 실현하려 할 아니에요 :

목록은 항상 예를 들어, 또한의 경우는 3 열 레이아웃에 표시되어야, 네 개의 모델을 전체적으로.
목록은 사전 순으로 정렬해야합니다.
각 자동차를 클릭하면 모델에 위에 나열된 자동차 (일부 html)에 대한 추가 정보가 표시되어야합니다.
목록에있는 차량 수는 언제든지 달라질 수 있습니다. 내가 원래 TD의 내용을 설정하기위한 .text을 사용했다 :

감사합니다 ...

출처

2013-11-27 egyamado

배열을 정렬하고, HTML을 만들고, 새로운 페이지를 열어 보는 등 꽤 많은 것을 요구합니다. 아무 것도 시도하지 않은 것처럼 보입니다. 이것은 우리가 당신을 위해 코드를 작성하는 곳이 아니며, 실제 문제에 직면하면 도움을 얻을 수있는 장소입니다. – adeneo

@adeneo, 나는 JS에서만 시도해 봤지만해야하는대로 작동하고있다. 또한 JS에서 DOM을 사용하여 테이블을 만드는 것이 혼란 스러울 수 있음을 발견했습니다. 더 간단한 방법이 있는지 알고 싶습니다.이 시점에서 붙어 있습니다. – egyamado

이 가야 당신은

// sort the cars alphabetically by model 
cars.sort(function(a, b) { return a.model > b.model; }); 

// create table 
var table = $("<table></table>"); 

$.each(cars, function(idx, car) { 

    var row = $("<tr></tr>"); 

    row.append($("<td></td>").html(car.model)); 
    row.append($("<td></td>").html(car.count)); 
    row.append($("<td></td>").html(car.details)); 

    table.append(row); 
}); 

// insert the table somewhere in your dom 
$(document.body).append(table);

편집

jsfiddle demo

시작 집단. 그러나 데이터 객체에 HTML이 있기 때문에 .html을 사용하여 표 셀 내용을 설정했습니다.

출처

2013-11-27 16:17:06

$ ("

")은 $ ("

")와 같습니다. 더 짧게하려면 – benjaminbenben

egydamo가 질문을 해결 한 경우 왼쪽의 녹색 눈금으로 대답을 선택하십시오. – thenewseattle

@benjaminbenben, 팁 주셔서 감사합니다. 나는 가능한 한 명시 적으로 선호한다. –

jQuery에서 DOM을 사용하여 테이블을 만드는 방법은 무엇입니까?

답변

관련 문제