이름, 직업, 생년월일을 입력하고 append 버튼을 누르면 테이블이 생성된다.
내가 입력하고 싶은 값을 입력을 하면 그 값들 옆에는 append 버튼이 아닌 remove 버튼이 생성된다.
이를 누르게 되면 내가 선택한 값만 remove 해주게 된다.
여기서는 세 번째 값인 '이기광'의 값을 지워주었다.
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<html>
<head>
<script>
function tableCreate(){
var html = '';
var name = $("#inName").val();
var job = $("#inJob").val();
var birth = $("#inBirth").val();
var remove = $("remove").val();
html += '<tr>';
html += '<td>'+name+'</td>';
html += '<td>'+job+'</td>';
html += '<td>'+birth+'</td>';
html += '<td><button onclick="tableDelete(this)" id="remove">remove</button></td>';
html += '</tr>';
$("#dynamicTable").append(html);
$("#inName").val('');
$("#inJob").val('');
$("#inBirth").val('');
}
function tableDelete(obj){
var tr = $(obj).parent().parent();
tr.remove();
}
</script>
</head>
<body>
<div>
<table border="1px" id="dynamicTable">
<colgroup>
<col width="200px">
<col width="200px">
<col width="200px">
<col width="100px">
</colgroup>
<thead>
<tr>
<th>이름</th>
<th>직업</th>
<th>생년월일</th>
<th>버튼</th>
</tr>
</thead>
<tbody id="dynamicTbody"></tbody>
<tfoot>
<tr>
<td><input type="text" placeholder="이름" id="inName"></td>
<td><input type="text" placeholder="직업" id="inJob"></td>
<td><input type="text" placeholder="생년월일" id="inBirth"></td>
<td><button onclick="tableCreate()">append</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
스크립트 태그 안에 src를 주고 링크를 걸어주었는데 이는 제이쿼리를 다운받지 않고 사용할 수 있는 방법
제이쿼리에서 자기들의 서버에 파일을 보관해놓고 우리는 스크립트 태그를 이용해 사용
var name = $("#inName").val();
아이디가 inName인 값을 변수 name에 저장
- $(" ") : 이 웹페이지에 있는
- .val() : 양식의 값을 가져오거나 값을 설정하는 메소드
html += '<td><button onclick="tableDelete(this)" id="remove">remove</button></td>';
- this : 객체 자체를 의미 (이를 사용하면 속성값을 변경하거나 연산할 수 있다)
$("#dynamicTable").append(html);
- .append() : 선택된 요소의 마지막에 새로운 요소나 컨텐츠를 추가
var tr = $(obj).parent().parent();
- .parent() : 부모의 요소를 선택
'Study > Javascript' 카테고리의 다른 글
| [javascript] 2차원 구구단 프로그램 (2) | 2020.06.05 |
|---|---|
| [javascript] 팩토리얼 계산 프로그램 (0) | 2020.06.05 |