[실험]테이블 밑에 새로 추가하면서 input에 있는 데이터 추가하기

주어진 표

규칙

        1. 버튼을 누르면 input에 있는 값을 가져온다.

        2. tbody의 자식 요소로 붙인다*****

        <tr><td></td><td></td><td></td><td></td><td></td></tr>

 

<처음 내가 만든거>

$('button').on('click',function(){

            // i++;

            console.log('click')

            var noo = $('#no').val()

            // console.log(noo)

            $('th').eq(0).text(noo)//여기다가 넣어줄 필요가 없는게, 그냥 표에다가 추가해준느거에 해야지 이걸 바꾸면 엉키지

            var nooo = $('#name').val()

            $('th').eq(1).text(nooo)

           

           

            $('tbody').append('<th>학번'+'</th>')

           

        });

나온 괴물 ㅋㅋㅋ 

 

<문제점>

1.일단 tbody에 넣어준다는 생각을 안함.

2. 타입 텍스트를 noo에 넣어준것 까진 좋았는데, 그걸 글자 사이에 직접 집어 넣으니까 이상해짐

3.append 뒤에 +의 용법이 적절하지 않음. (학번은 왜 집어 넣는데 ㅋㅋㅋ) tmi. 처음에는 + 넣을 생각도 못했음

<선생님이 만들어주신것>

$('button').on('click',function(){

            // console.log($('input[type="text"]'));// ???? 어떻게 들고오는지 정확하게 감이 안잡히네

            var no = $('#no').val();

            var name = $('#name').val();

            var sub = $('#sub').val();

            var score = $('#score').val();

            var desc = $('#desc').val();

            console.log(no+name+sub+score+desc);

            var tr = '<tr>';// 처음에는 그냥 = 들어가는 이유가?

                tr += '<td>'+no+'</td>';

                tr += '<td>'+name+'</td>';

                tr += '<td>'+sub+'</td>';

                tr += '<td>'+score+'</td>';

                tr += '<td>'+desc+'</td>';

                tr += '<tr>';

            console.log(tr)

            $('tbody').append(tr);

        });

아주 잘 출력된다.

1. 버튼에 클릭을 달고

2,. 콘솔로 찍어본다. ($(input[type="text"]))  (이 형태는 잘 사용 안하던 거니까 잘 기억해줄것!)

3. input 값을 변수에 넣는다.

4. 콘솔로 찍어본다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 여기 까진 안어려움

5. 표를 추가 해줄꺼니까 append 안에 들어갈것을 정하면됨

6. 누적함 보여주기 위해서 tr 에 넣으신거 같음

7. 넣어주면 끝