jquery에서 테이블에 행을 추가하는 방법

오늘은 jQuery를 사용하여 테이블에 행을 추가하는 방법에 대해 알아보겠습니다. 웹 개발자라면 페이지에 데이터를 표시하는 것이 중요하다는 것을 알아야 합니다. 테이블은 데이터를 표현하는 매우 좋은 방법입니다. 테이블을 사용하여 데이터를 표시하려면 jQuery를 사용하여 동적으로 행을 추가하는 방법을 알아야 합니다.

jQuery를 사용하여 테이블에 행을 추가하는 방법을 살펴보겠습니다.

첫 번째 단계는 테이블 개체를 얻는 것입니다. 테이블 개체가 이미 있는 경우 jQuery에서 다음 코드 줄만 사용하여 가져오면 됩니다.

var table = $('table');

테이블 개체가 없으면 다음 코드 줄을 사용하여 테이블을 생성해야 합니다. object:

var table = $('<table></table>');

두 번째 단계는 행 개체를 만드는 것입니다. 행 개체를 생성하려면 다음 코드 줄을 사용해야 합니다.

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

세 번째 단계는 셀 개체를 생성하는 것입니다. 행에 셀을 추가하려면 다음 코드 줄을 사용해야 합니다.

var cell = $('<td></td>');

네 번째 단계는 셀 개체를 행 개체에 추가하는 것입니다.

row.append(cell);

다섯 번째 단계는 행 개체를 테이블 개체에 추가하는 것입니다.

table.append(row);

이제 테이블에 셀 행 추가가 완료되었습니다.

그러나 실제 애플리케이션에서는 테이블의 각 행에 여러 셀을 추가해야 하며 각 셀은 서로 다른 데이터와 스타일을 가질 수 있습니다. 이 경우 전체 테이블을 작성하려면 for 루프를 사용해야 합니다. 다음으로 전체 코드를 살펴보겠습니다.

var data = [
    {name: 'John', age: 30},
    {name: 'Jane', age: 28},
    {name: 'Bob', age: 35},
    {name: 'Mary', age: 29}
];

var table = $('<table></table>');
    
for(var i = 0; i < data.length; i++){
    var row = $('<tr></tr>');
    var name = $('').text(data[i].name);
    var age = $('').text(data[i].age);
        
    row.append(name).append(age);
    table.append(row);    
}

$('#tableWrapper').empty().append(table);

이 코드는 for 루프를 사용하여 데이터 목록을 탐색하고 text() 메서드를 사용하여 셀에 텍스트를 추가합니다. 마지막으로empty() 메소드를 사용하여 #tableWrapper 요소의 내용을 지우고,append() 메소드를 사용하여 여기에 테이블 객체를 추가하면 전체 테이블 테이블 구성이 완료됩니다.

요약:

이 기사에서는 jQuery를 사용하여 테이블에 단일 행과 여러 행을 추가하는 방법을 배웠습니다. 이는 특히 페이지에 동적 데이터를 추가해야 할 때 매우 유용한 기술입니다. 이제 jQuery 테이블에 행을 추가하는 방법을 익혔으니 직접 시도해 보세요!

위 내용은 jquery에서 테이블에 행을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!