To Do List 만들기
- 정보를 입력 받아서 List 형태로 추가하기
- 아주 간단한 제이쿼리 구현 기능
- input으로 값을 입력 받고, 해당 값을 <ul>에 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click( function() {
var li = $("<li></li>").html($("input").val());
$("ul").append(li);
});
});
</script>
</head>
<body>
<p>Please enter your to do!</p>
<input type="text"><button>ADD</button>
<hr>
<h2>To Do List</h2>
<ul></ul>
</body>
</html>
ㅇ 사용자 화면
학생 점수 입력 받아 출력하는 테이블 만들기
- 하나가 아닌 여러개의 input으로 값을 입력 받아서 테이블에 정보를 추가하는 기능
- 받아온 여러개의 정보를 <tr> 태그로 한줄 한줄 테이블에 append 하는 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click( function() {
var input = $("input");
var tr = $("<tr></tr>");
$.each(input, function(i, item) {
var td = $("<td></td>").html($(item).val());
$(tr).append(td);
});
$("table").append(tr);
$(input).val("");
});
});
</script>
</head>
<body>
이름 <input type="text"><br>
국어 <input type="text"><br>
영어 <input type="text"><br>
수학 <input type="text"><br>
<button>등록</button>
<h2>시험 점수</h2>
<table border="1px solid black" width="80%">
<tr><td>이름</td><td>국어</td><td>영어</td><td>수학</td></tr>
</table>
</body>
</html>
ㅇ 사용자 화면
반응형
'Java Script > jQuery' 카테고리의 다른 글
| 동일 예제 JavaScript VS jQuery 비교! (0) | 2019.05.14 |
|---|---|
| jQuery 예제, 버튼 이벤트로 정보 숨기고 보이기(토글) (0) | 2019.05.14 |
| jQuery 예제, 체크박스 모두 선택 (0) | 2019.05.14 |
| 제이쿼리로 이미지 슬라이더 구현 (0) | 2019.05.14 |
| jQuery 애니메이션 큐 (이벤트 누적 제어) (0) | 2019.05.14 |
댓글