jQuery로 동적 태그를 만드는 방법은 여러가지가 있지만, 두 가지만 소개하고자 한다.
1. 태그를 String으로 써서 추가하기
$('#btn1').click(function(){
var html = "<tr><td>방법1</td><td>방법1</td><td>방법1</td></tr>"
$('tbody').append(html);
});
2. 객체를 생성하여 추가
$('#btn2').click(function(){
var $tr = $("<tr>",{});
var $td1 = $("<td>",{text:"방법2"});
var $td2 = $("<td>",{text:"방법2"});
var $td3 = $("<td>",{text:"방법2"});
$tr.append($td1);
$tr.append($td2);
$tr.append($td3);
$('tbody').append($tr);
});
tr태그를 우선 만들어 준뒤 tr태그에 td를 추가하는 방식이다.
text만 지정해 주었지만 id나 class등 원하는 속성과 값을 추가할 수 있다.
예제 소스
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<table border="1">
<colgroup>
<col width="200"><col width="200"><col width="200"><col width="200">
</colgroup>
<thead>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<button type="bytton" id="btn1">방법1</button>
<button type="bytton" id="btn2">방법2</button>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
var html = "<tr><td>방법1</td><td>방법1</td><td>방법1</td></tr>"
$('tbody').append(html);
});
$('#btn2').click(function(){
var $tr = $("<tr>",{});
var $td1 = $("<td>",{text:"방법2"});
var $td2 = $("<td>",{text:"방법2"});
var $td3 = $("<td>",{text:"방법2"});
$tr.append($td1);
$tr.append($td2);
$tr.append($td3);
$('tbody').append($tr);
});
});
</script>
</body>
'프로그래밍 > jQuery & javaScript' 카테고리의 다른 글
| [jQuery] CSS 추가, 삭제, 변경 (0) | 2019.10.28 |
|---|---|
| [jQuery] 요소 삭제 remove와 empty (0) | 2019.09.10 |
| 자바스크립트 날짜 계산(년, 월, 일, 시, 분, 초) (0) | 2019.08.22 |
| jqGrid 사용 예제 (v5.3.2, v4.4.3) (2) | 2019.07.17 |
| jQuery 이미지 클릭 시 크게 보기 (9) | 2019.06.26 |
