코딩도전기/J-Query
J-Query_TEST
by 코도꼬마
2023. 2. 15.
Table에 열 추가하기
</head>
<body>
<table>
<thead>
<tr>
<th>학번</th>
<th>이름</th>
<th>과목</th>
<th>학점</th>
<th>설명</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
학번 : <input type="text" id="no"/><br/>
이름 : <input type="text" id="name"/><br/>
과목 : <input type="text" id="sub"/><br/>
학점 : <input type="text" id="score"/><br/>
설명 : <input type="text" id="desc"/><br/>
<button id="append">입 력</button>
<button id="enpty">삭 제</button>
</body>
<script>
/*
//입력버튼을 누르면 텍스트 박스의 내용을 table에 넣음
//1.텍스트 박스 가져오기
//2.클릭 이벤트 생성
//3.th아래 td로 넣기
var $txt = $('input');
$('#append').click(function(){
//console.log('ok');
$('tbody').append($('<tr>'+
'<td>'+$txt.eq(0).val()+'</td>'+
'<td>'+$txt.eq(1).val()+'</td>'+
'<td>'+$txt.eq(2).val()+'</td>'+
'<td>'+$txt.eq(3).val()+'</td>'+
'<td>'+$txt.eq(4).val()+'</td>'+
'</tr>'
));
});
*/
$('button').click(function(){
var $input = $('input[type="text"]');
var html = '<tr>';
for(var i=0; i<$input.length; i++){
html += '<td>'+$input.eq(i).val()+'</td>';
}
html += '</tr>'
//console.log(html);
$('tbody').append(html);
});
$('#enpty').click(function(){
//console.log('ok');
$('tbody').empty($('<tr></tr>'));
});
</script>
