記錄

jquery&json) 연습문제 본문

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>


저작자표시

'Web > Jquery' 카테고리의 다른 글

jquery) jquery ui datepicker 형식 설정  (0) 2018.04.14
jquery) Ajax + 외부 API  (0) 2018.03.27
jquery) Ajax  (0) 2018.03.22
jquery) .each, empty&remove  (0) 2018.03.16
jquery) selector, event, get, set, add  (0) 2018.03.15
'Web/Jquery' Related Articles more
Comments