Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

node.js ajax tr 선택하기 본문

TIS_2018/응용sw2018_2기

node.js ajax tr 선택하기

moozi 2018. 11. 9. 09:29

node.js ajax tr 선택하기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>node.js</title>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function(){
            function selectData(){
                $("#output").empty();//테이블초기화
                $.getJSON("/products",function(data){
                    $(data).each(function(index,item){
                        var output="";
                        output+="<tr style='cursor:pointer'>";
                        output+="   <td class='id'>"+item.id+"</td>";
                        output+="   <td>"+item.name+"</td>";
                        output+="   <td>"+item.modelnumber+"</td>";
                        output+="   <td>"+item.series+"</td>";
                        output+="</tr>";
                        $("#output").append(output);
                    });
                });
            }
           
            //등록
            $("#insert_form").submit(function(event){
                var data=$(this).serialize();
                $.post("/products",data,selectData);
                event.preventDefault();
            });
           
           
            //함수호출
            selectData();
           
            //행선택하기
            $("#output").on("click","tr",function(){
                $("#ids").val($(this).find("td").eq(0).html());  $("#name").val($(this).find("td").eq(1).html());         $("#modelnumber").val($(this).find("td").eq(2).html());
                $("#series").val($(this).find("td").eq(3).html());             
            });
           
            //수정
            $("#updateBtn").click(function(){
               
                var data1=$("#insert_form").serialize();
                console.log("/products/"+$("#ids").val());
                $.ajax({
                    url:"/products/"+$("#ids").val(),
                    type:"put",
                    dataType:"text",
                    data:data1,
                    success:function(){
                        selectData();
                    }
                });
//                $.post("/products/"+$("#id").val(),data,selectData);
               
            });
        });
    </script>
</head>
<body>
   <h1>데이터추가</h1>
    <form id="insert_form">
       <input type="hidden" name="id" id="ids">
        <table>
            <tr>
                <td>상품명</td>
                <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr>
                <td>모델번호</td>
                <td><input type="text" name="modelnumber" id="modelnumber"></td>
            </tr>
            <tr>
                <td>시리즈</td>
                <td><input type="text" name="series" id="series"></td>
            </tr>
        </table>
        <input type="submit" value="추가">
        <input id="updateBtn" type="button" value="수정">
    </form> 
   
    <h1>상품목록</h1>
    <table id="output" border="1">
       
    </table>
 
    <br>
 
  
    <a href="second.html">다음페이지</a>
   
   
</body>
</html>

'TIS_2018 > 응용sw2018_2기' 카테고리의 다른 글

11/12 안드로이드코드  (0) 2018.11.12
안드로이드연습문제01  (0) 2018.11.12
node.js연습문제01  (0) 2018.11.08
node.js 게시판  (0) 2018.11.08
11/8 node.js  (1) 2018.11.08
'TIS_2018/응용sw2018_2기' Related Articles more
Comments