Web/Jquery
jquery&json) 연습문제
surhommejk
2018. 3. 16. 14:15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
// json 포맷으로 jquery를 이용해서 html의 데이터 뽑아오기
$(function(){
var arr = [];
// 제이슨 타입으로 값 넣기
$('table>tbody>tr').each(function(){
arr.push(
{
// 제이슨에서는 아래 각각에 ; 붙이지 않고 , 로 연결처리
gredes: $(this).children().eq(0).text(),
name: $(this).children().eq(1).text(),
number: $(this).children().eq(2).text()
}
);
});
console.log(arr);
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr><td>기수</td><td>이름</td><td>번호</td></tr>
</thead>
<tbody>
<tr>
<td>101th</td><td>홍길동</td><td>10</td>
</tr>
<tr>
<td>102th</td><td>김유신</td><td>20</td>
</tr>
<tr>
<td>103th</td><td>유관순</td><td>30</td>
</tr>
</tbody>
</table>
<p>
<button onclick="javascriptFunc()">함수호출</button>
</p>
<div id="display"></div>
<div id="display2"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
.box {
float: left;
margin: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#addbtn').click(function(){
var divs = $('#original > div');
var boxes = $('#original > div > input');
$(boxes).each(function(index, el){
if(el.checked){
$('#change').append(divs[index]);
}
});
}); // addbtn click event
$('#delbtn').click(function(){
var divs = $('#change > div');
var boxes = $('#change > div > input');
$(boxes).each(function(index, el){
if(el.checked){
$('#original').prepend(divs[index]);
}
});
}); // delbtn click event
});
</script>
</head>
<body>
<div id='original' class="box">
<div><input type="checkbox"> test1</div>
<div><input type="checkbox"> test2</div>
<div><input type="checkbox"> test3</div>
<div><input type="checkbox"> test4</div>
<div><input type="checkbox"> test5</div>
<div><input type="checkbox"> test6</div>
</div>
<div class="box">
<input type="button" value="add" id = 'addbtn'/> <br />
<input type="button" value="delete" id = 'delbtn' /> <br />
</div>
<div id='change' class="box">
</div>
</body>
</html>