jQuery로 테이블 만들기
Anika Tabassum Era
2023년1월30일
jQuery 라이브러리의 도움으로 콘텐츠에 새 테이블 행을 추가하고 테이블 요소를 만들 수 있습니다. 데이터 또는 출력 패턴이 테이블 형식으로 쌓이도록 기본 루프 작업을 진행합니다.
테이블 태그와 내용을 문자열로 사용하는 두 가지 예를 살펴보겠습니다. 나중에 추가하면 HTML 본문에 테이블로 구성됩니다.
그러나 테이블 요소를 문자열로 생성하면 나중에 사용자 정의하는 데 방해가 될 수 있습니다. 따라서 두 번째 예에서는 테이블 요소의 인스턴스를 만들고 속성(id, class)을 지정하여 테이블 내용 속성을 변경할 수 있습니다.
이해를 위해 철저히 점검합시다.
테이블 내용을 문자열로 가져와 jQuery로 테이블 만들기
여기에서는 테이블 요소 시작 태그를 저장하고 내용을 추가하고 종료 태그를 저장하는 변수를 사용합니다. 다음 단계에서는 이 합계 또는 문자열 모음을 고려한 div에 추가합니다.
기본적인 문제는 테이블 데이터 또는 테이블 행의 속성을 다시 초기화할 수 없다는 것입니다. 코드 라인을 확인해보자.
코드 조각:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var content = "<table>"
for(i=0; i<3; i++){
content += '<tr><td>' + 'output ' + i + '</td></tr>';
}
content += "</table>"
$('#tab').append(content);
</script>
출력:
테이블 인스턴스를 생성하여 jQuery로 테이블 생성
id 및 class 속성과 함께 테이블에 대한 인스턴스를 만드는 것을 고려할 것입니다. 나중에 기본 설정에 따라 속성을 변경할 수 있습니다.
코드 펜스는 이를 보다 명시적으로 설명합니다.
코드 조각:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var table = $('<table>');
for(i=0; i<3; i++){
var row = $('<tr>').text('output ' + i).addClass('rows');
row.addClass('rows').css({'color':'red'});
table.append(row);
}
$('#tab').append(table);
</script>
출력:
