메뉴 건너뛰기

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

버튼_클릭시_데이터.PNG


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
<!-- style.css 로 추가 -->
<link rel="stylesheet" type="text/css" href="style.css">
 
</head>
<body>
 
    <h1>수영 시합</h1>
    <button id="woman">여자부</button>
    <button id="man">남자부</button>
 
    <table border="1" id="result">
        <tr>
            <th></th>
            <th>이름</th>
            <th>타임</th>
        </tr>
        <tr>
            <th>우승</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>2위</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>3위</th>
            <td></td>
            <td></td>
        </tr>
    </table>
 
    <script type="text/javascript">
        var man = [ [ "", "" ], 
                [ "홍길동", "1:21:12" ], 
                [ "일지매", "1:25:23" ],
                [ "임꺽정", "1:32:29" ], 
        ];
 
        var woman = [ [ "", "" ], 
                [ "김영희", "1:08:20" ], 
                [ "고영지", "1:21:48" ],
                [ "박민서", "1:48:11" ], 
        ];
 
        // $("tr:even").css("background-color", "#00ff00");
 
        $("tr:eq(3)>td:eq(0)").html("test");
 
        /* 
         $("#id").text("<b>world</b>");            // <b>Hello</b>
        $("#id").html("<b>world</b>");        // Hello <- 두껍게
        $("#id").val();
        */
 
        $("#woman").click(function() {
            for (i = 0; i < 4; i++) {
                for (j = 0; j < 2; j++) {
                    // id woman 버튼 클릭시 데이터 삽입
                    $("tr:eq(" + i + ")>td:eq(" + j + ")").html(woman[i][j]);
                }
            }
        });
 
        $("#man").click(function() {
            for (i = 0; i < 4; i++) {
                for (j = 0; j < 2; j++) {
                    // id man 버튼 클릭시 데이터 삽입
                    $("tr:eq(" + i + ")>td:eq(" + j + ")").html(man[i][j]);
                }
            }
        });
    </script>
 
</body>
</html>


List of Articles
번호 제목 날짜 조회 수
119 jquery 팝업 차단 없이 띄우기 2019.03.05 2855
118 [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법 2019.03.05 1129
117 jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값) 2019.01.16 1079
116 jQuery 기초 (클릭하면 이미지 변경 / mouseover시 애니메이션 효과주기 / 동적으로 변경) 2019.01.16 1502
115 jQuery 기초 (focus, blur, toggle / mouseenter, mouseleave, mousedown, mouseup, hover) 2019.01.16 1261
» jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시 데이터 삽입) file 2019.01.16 1181
113 jQuery 기초 (JQuery - text(), val(), html(), attr(), prop()) 2019.01.16 1054
112 jQuery 기초 (attr()로 두가지 동시에 접근 / 변경) 2019.01.16 1119
111 jQuery 기초 (텍스트 추가 (createElement, createTextNode, appendChild), (html, javascript, jquery) file 2019.01.16 1409
110 jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty) file 2019.01.16 1084
109 jQuery 기초 (txt 파일 가져오기 (load) , 클릭시에 배경색을 변경(json)) file 2019.01.16 3222
108 Query 기초 (동적 테이블 (데이터 추가 / 삭제), integrateTable(정렬(sort)) file 2019.01.16 2191
107 jQuery 기초 (jQuery 달력 (datepicker)) file 2019.01.16 1321
106 jQuery 기초 (Postcodify - 도로명주소 우편번호 검색 프로그램 (코딩 예제) (HTML) / POP UP 버젼) file 2019.01.16 1349
105 .removeAttr() : 특정 속성을 제거 2019.01.16 1021
104 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 961
103 popModal jQuery Plugin Examples / 무료 jQuery 팝업 플러그인 file 2019.01.16 1233
102 jQuery Plugin : Slider file 2019.01.10 1113
101 jQuery datepicker 팝업창 사이즈 바꾸기 file 2019.01.10 1495
100 jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) file 2019.01.10 1093
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved