TodoList ver.1
<script>
const todos = [
{subject:'모임 망년회', done:true},
{subject:'크리스마스 모임', done:false}
];
let $list = $('#list');
function printTodos(){
$list.empty();
$.each(todos, function(idx,todo){
const $tr = $('<tr>').appendTo($list);
// #list에서 li로 출력된 할일들을 각각 todos의 할 일 원소와 연결
// 프론트에서 사용자가 선택하면 todos 배열의 원소를 수정
// 그리고 그 수정된 값에 따라 프론트가 갱신!돼야 한다.
// li를 클릭하면 연결된 배열 원소를 알아야 한다
// → li에 연결된 원소의 인덱스를 저장한다.
// html5에서 html요소에 임의의 값을 저장하는 표준: data-속성
$('<td>').attr('class','subject').attr('data-idx',idx).
text(todo.subject).appendTo($tr);
if(todo.done===true){
// $td는 (완료)라는 글자를 출력하는 두번째 td
const $td = $('<td>').text('(완료)').appendTo($tr);
// 두번쨰 td가 (완료)인 경우 앞에 있는 할 일에 td에 .done 적용
$td.prev().addClass('done');
} else {
$('<td>').appendTo($tr);
}
$('<td>').text('X').attr('class','delete').attr('data-idx',idx)
.appendTo($tr);
})
}
function addTodo(inputSubject){
todos.push({subject:inputSubject, done:false});
printTodos();
}
$(document).ready(function(){
$list = $('#list');
printTodos();
$('#add').click(function(){
addTodo($('#subject').val();
});
// 동적으로 생성한 요소는 기본 이벤트 메소드로 처리가 안된다.
// 정적: $(document).ready()까지
$('#list').on('click','.subject',function(){
// attr로 저장한 data-속성을 읽어온다.
// 읽어오면 String이다.
const idx = $(this).attr('data-idx');
todos[idx].done =!todos[idx].done;
if(todos[idx].done===true){
$(this).addClass('done');
$(this).next().text('(완료)');
} else {
$(this).removeClass('done');
$(this).next().text('');
}
});
$('#list').on('click','.delete',function(){
const idx = $(this).attr('data-idx');
// 삭제: 배열splice(위치, 개수)
todos.splice(idx,1);
printTodos();
});
});
</script>
</head>
<body>
<input type='text' name='' id='subject'>
<button id='add'>추가</button>
<hr>
<table class='table table-hover'>
<thead>
<tr>
<th>할일</th><th>상태</th><th></th>
</tr>
</thead>
<tbody id='list'>
</tbody>
</table>
</body>jQuery 유틸리티 메소드(배열 관리 메소드) .each()
$.each(todos, function(idx,todo){.each의 첫 번째 인자는 배열 또는 객체, 두 번째 인자는 콜백함수 위의 예제에서는 idx인덱스와 todo값을 파라미터로 줬다.
.click() vs .on('click')
on("click")과 click()의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이. on("click")은 동적으로 가능하고 자식에게 물려준다. click()은 최초에 선언된 element에만 동작한다.
