js 동적 테이블 만드는 두 가지 방법

동적 테이블을 만드는 방법은 다양하고 기능적인 차이에 따라 난도도 천차만별이지만 여태까지 회사에서 일하며 알게된 두 가지 방법을 소개하고자 한다.

1. createElement() 함수 사용

정확한 함수 내부 코드는 모르지만 파라미터로 들어가는 html문법을 만들어주는 것 같다.

See the Pen Dynamic table used createElement() by ohsehan (@ohsehan) on CodePen.

코드팬에선 데이터가 없기 때문에 임의의 스트링을 데이터라고 생각하고 넣었다.

반복문 안에 'tr', 'td'를 만드는 createElement함수를 넣는다면 리스트 개수만큼 행을 동적으로 만드는 테이블을 만들 수 있다.

2. html 문법을 string 변수를 통해 jQuery 로 전달

이름은 그냥 내가 임의로 정했다. html 문법인지는 모르겠지만 편의상 정함.

See the Pen Dynamic table used html by ohsehan (@ohsehan) on CodePen.

row 라는 변수에 html 문법을 저장하여 append() 함수를 통해 전달하는 기능이다.

createElement() 와 마찬가지로 row에 저장하는 코드를 반복문 안에 넣으면 동적 테이블을 만들 수 있다.

 

두 가지를 소개한 이유는 내가 생각할 때 차이가 있기 때문이다.

createElement()는 함수이다 보니 내부적으로 정해져있는 것 같다는 생각이 들었다. createElement('tr') 을 하면 html에 <tr></tr>이 생기는 함수다 보니 tr 안에 이벤트 메소드를 선언하는 등 커스텀에 한계가 있다고 생각했다. 물론 있는데 내가 모르는 것일 수도 있다.

두 번째 방법인 html 문법을 직접 기입하는 것은 내가 원하는 대로 커스텀할 수 있다. 이벤트없는 동적 테이블을 만들 땐 createElement를 이용하고 이벤트가 있는 동적 테이블을 만들 땐 html을 js에서 직접 입력하는 방식을 선택할 것 같다.