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

9/7 product.html 본문

TIS_2017/응용sw_2기

9/7 product.html

moozi 2017. 9. 7. 09:43

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Products</title>
    <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    ></script>
    <script>
        $(document).ready(function(){
            $("#output").on("mouseover","tr",function(){
                $(this).css("background","gray");
                $(this).css("cursor","pointer");
            });
            $("#output").on("mouseleave","tr",function(){
                $(this).css("background","none");
                $(this).css("cursor","none");
            });
             $("#output").on("click","tr",function(){ 
                $("#name").val($(this).find("td").eq(1).html());
                $("#modelnumber").val($(this).find("td").eq(2).html());
                $("#series").val($(this).find("td").eq(3).html());
                 $("#update").removeAttr("disabled");
            });
           
            function selectData(){
                $("#output").empty();//초기화.비우기
               
                $.getJSON("/products",function(data){
                    $(data).each(function(index,item){
                        var output="";
                        output+="<tr>";
                        output+="  <td>"+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.preventDeault();
//            });
           
            $("#insert").click(function(event){
                $.ajax({
                    url:"/products",
                    type:"post",
                    dataType:"text",
                    data:{
                        name:$("#name").val(),
                        modelnumber:$("#modelnumber").val(),
                        series:$("#series").val()
                    },
                    success:selectData
                });
               
                event.preventDeault();
            });
           
            selectData();
        });
    </script>
   
</head>
<body>
    <h1>Products</h1>

    <form id="insert_form" method="post">       
        name <input type="text" name="name" id="name"><br>
        model no. <input type="text" name="modelnumber" id="modelnumber"><br>
        series <input type="text" name="series" id="series"><br>
        <input id="insert" type="button" value="입력"><input type="button" id="update" value="수정" disabled><br>
    </form>
    <br>
    <table id="output" border="1">
    </table>
   
</body>
</html>

'TIS_2017 > 응용sw_2기' 카테고리의 다른 글

node.js chating client sample  (0) 2017.09.07
node.js socket개념 정리  (0) 2017.09.07
nodejs연습문제01  (0) 2017.09.06
응용s/w 2기 포트폴리오 미니프로젝트  (16) 2017.09.05
jsp연습문제07  (0) 2017.09.04
'TIS_2017/응용sw_2기' Related Articles more
Comments