TodoList ver.2
<script>
const todolist = [
{job:"영화보기", done: flase},
{job:"주말 산책", done: true},
{job:"ES6 학습", done: flase},
{job:"잠실 야구장", done: flase},
];
let $tbody = undefined;
function addTodo(task){
const todo = {job:task, done:false};
todolist.push(todo);
printTodoList();
}
function printTodoList(){
$tbody.empty();
$.each(todolist, function(idx, todo){
const $tr = $('<tr>').appendTo($tbody);
$('<td>').attr('class','job').text(todo.job).attr('data-idx',idx)
.appendTo($tr);
if(todo.done==true){
const $td = $('<td>').text('(완료)').appendTo($tr);
$td.prev().addClass('done');
$td.addClass('done');
} else {
const $td = $('<td>').text('').appendTo($tr);
$td.prev().removeClass('done');
$td.removeClass('done');
}
$("<td>").attr('class','close').text('X').appendTo($tr);
});
}
$(document).ready(function(){
$tbody = $('#list');
printTodoList();
$('#task').keyup(function(e){
if($('#task').val()===''){
alert('할 일은 필수입력입니다.');
return;
}
if(e.keyCode==13){
addTodo($('#task').val());
$('#task').val('');
printTodoList();
}
});
$('#add').click(function(){
if($('#task').val()===''){
alert('할 일은 필수 입력입니다.');
return;
}
addTodo($('#task').val());
$('#task').val('');
printTodoList();
});
$('#todo_table').on('click', '.job', function(){
todolist[$(this).data('idx')].done
=!todolist[$(this).data('idx')].done;
printTodoList();
});
$('#todo_table').on('click', '.close', function(){
todolist.splice($(this).data('idx'),1);
printTodoList();
});
})
</script>
</head>
<body>
<div id='app'>
<div class='form-group'>
<input type='text' class='foem-control' id='task'
placeholder='할 일 입력 후 엔터'>
<button type="button" class="btn btn-primary" id='add'>추가
</button>
</div>
<table id='todo_table'>
<thead>
<tr>
<th>할 일</th><th>상태</th><th></th>
</tr>
</thead>
<tbody id='list'>
</tbody>
</table>
</div>
</body>.attr('class')
$('<td>').attr('class','job').text(todo.job).attr('data-idx',idx)td의 class='job'
.prev()
$td.prev().addClass('done');선택한 요소의 바로 이전에 위치한 형제 요소를 선택
keyup(function(e){}
키를 눌렀다 뗄 때 !!!
$('#task').keyup(function(e){
if($('#task').val()===''){
alert('할 일은 필수입력입니다.');
return;
}
if(e.keyCode==13){ // 엔터키 막기
addTodo($('#task').val());
$('#task').val('');
printTodoList();
}