[jQuery] 제이쿼리 동적 테이블 행(tr) 생성하기(예제포함)
- 웹/JQuery
- 2020. 7. 18.
jquery로 동적으로 테이블 행 생성하기, 테이블 row추가하는 방법
개발을 하다보면 테이블에 행을 추가하는 경우가 생깁니다.
어느 특정 액션(버튼을 클릭) 을 한다든지, 특정함수를 호출을 하였을때 말이죠.
이러한 경우 jQuery append를 통해 테이블을 동적으로 생성할 수 있습니다.
테이블 샘플 데이터 생성
<style>
table {
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
}
</style>
<body>
<h2>
테이블 동적 생성
</h2>
<table>
<colgroup>
<col width="110">
<col width="110">
<col width="130">
</colgroup>
<thead>
<tr>
<th>회원아이디</th>
<th>회원명</th>
<th>회원주소</th>
</tr>
</thead>
</table>
<table>
<colgroup>
<col width="110">
<col width="110">
<col width="130">
</colgroup>
<tbody id="memDiv">
<tr>
<td>hong99</td>
<td>홍길동</td>
<td>서울</td>
</tr>
<tr>
<td>sejong80</td>
<td>세종대왕</td>
<td>대전</td>
</tr>
</tbody>
</table>
<button onclick="insertTr()">테이블 행추가</button>
</body>
샘플로 테이블을 만들었습니다.
현재 테이블에는 홍길동, 세종대왕 두행이 있습니다.
아래 테이블행추가 버튼을 클릭하여 동적으로 테이블 행을 생성해보겠습니다.
테이블 동적 생성 스크립트
우선 새로운 행을 어디에 넣을지 지정을 해야합니다.
tbody 에 저는 memDiv 라는 아이디를 지정하여 전 여기 밑에 행을 추가할 예정입니다.
버튼을 클릭시 행을 추가할 데이터 tr,td를 문자열로 생성하여 memDiv 안에 append를 하면됩니다.
function insertTr(){
var insertTr = "";
insertTr += "<tr>";
insertTr += "<td>lee20</td>";
insertTr += "<td>이순신</td>";
insertTr += "<td>부산</td>";
insertTr += "</tr>";
$("#memDiv").append(insertTr);
}
테이블행추가 버튼 클릭시 결과
행추가 버튼을 클릭하니 세종대왕 밑에 지정해놓은 tr,td가 입력이 되었습니다.
append이기 때문에 젤 하단에 추가가 됩니다.
이렇게 고정된 데이터가 추가가 된다면 윗부분처럼 하드코딩하여 행을 추가하면 되고
데이터리스트를 불러와서 테이블행을 추가 한다면 for문을 돌려서 행을 추가하면 됩니다.
테이블 행을 추가할 때 기존에 데이터 추가가 아닌 불러온 데이터만 행을 그려야 한다면
.empty()를 사용하여 기존 테이블안에 있는 데이터를 모든 지운다음 행을 추가해주면 됩니다.
$.getJSON(url, param, function (data, status) {
var tags = [];
// 기존테이블 데이터 지우고 행을 추가해야한다면 아래 empty() 추가
$("#memDiv").empty();
if (data != null) {
$.each(data.rows, function (idx, el) {
tags.push("<tr>");
tags.push('<td>' + el.memberId + '</td>');
tags.push('<td>' + el.memberName + '</td>');
tags.push('<td>' + el.memberAddr + '</td>');
tags.push('</tr>');
$("#memDiv").append(tags);
});
}
});
'웹 > JQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 첨부파일 확장자 및 용량 체크(특수문자체크) (0) | 2021.07.09 |
|---|---|
| [Jquey] 제이쿼리 객체 빈값 확인하기($.isEmptyObject()) (0) | 2021.07.07 |
| [jQuery] 제이쿼리 serialize()에 파라미터 추가하기 (0) | 2020.07.16 |
| [jQuery] 제이쿼리 공백제거 모든방법(trim,정규식) (0) | 2020.07.14 |
| [jQuery] window.open() 팝업 완벽개념정리 (0) | 2020.07.06 |