자바스크립트 HTML 테이블 행 추가하기 (td태그 복사)

HTML에서 table,  tbody,  tr,  td 를 이용해

간단하게 표를 만들고 버튼을 눌러 행을 추가하는 기능을 만들어보자.

일단 행을 추가해줄 버튼과 아이디, 이름, 전화번호, 주소를 td 태그를 이용해 만들어 주자.

이제 "로우추가" 라는 버튼을 누르면 행이 추가될 수 있도록

function을 만들어주자. 간단하게 insertRow() 를이용해 행(로우)을 추가할 수 있다.

insertCell() 은 열을 추가하는 것인데 insertRow 가  tr 태그를 추가하는거라면

inserCell은  td 를 추가하는 것이다.

innerHTML을 이용해  input 태그를 넣어줬다.

로우추가 버튼을 누르면 아래와같이 로우가 추가되고

innerHTML을 이용해  input 태그가 들어가 있는 상태이므로

아래처럼 값을 입력할 수 있다.