HTML - 할일목록
<html>
<head>
<title>할일목록</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Sunflower:wght@300&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="common.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
button:disabled {background-color: antiquewhite; color: black;}
.row:nth-child(3n) {background: rgb(139, 102, 0); color:white;}
.row:hover {background:darkcyan; color: black;}
</style>
</head>
<body>
<div id= "page">
<div id ="top">
<h1>할일 목록</h1>
<table id ="todos"></table>
</div>
<div id ="center"></div>
<div id ="buttons">
<button id ="prev">이전</button>
<span id ="curpage" style ="color: white;">1</span>
<button id="next">다음</button>
</div>
<div id="bottom">
<h5>CopyRight 2022. 강깸 All Right Reserved.</h5>
</div>
</div>
</body>
<script>
let curpage =1; //현재페이지
let perpageNum=10;
let lastPage=Math.ceil(100/perpageNum);
$("#curpage").html(curpage+"/"+lastPage);
getList();
//다음버튼을 클릭한경우
$("#next").on("click", function(){
curpage++;
$("#curpage").html(curpage +"/"+lastPage);
getList();
});
//이전버튼을 클릭한 경우
$("#prev").on("click", function(){
curpage--;
$("#curpage").html(curpage+"/"+lastPage);
getList();
});
//목록을 불러오는 함수
function getList(){
$.ajax({
type : "get",
dataType: "json",
url :"https://jsonplaceholder.typicode.com/todos",
success: function(data){
let str = "<tr><th width=50>완료</th><th width=600>할일</th></tr>"
$(data).each(function(){
let title =this.title;
let id =this.id;
let completed = this.completed;
let start = (curpage-1)*perpageNum +1;
let end = (curpage)*perpageNum
if(id>=start && id<=end){
str += "<tr class ='row'>";
if(completed) {
str +="<td ><input type = 'checkbox' checked></td>";
}else {
str +="<td><input type = 'checkbox'></td>";
}
str +="<td>"+id+ ":" +title+"</td>"
str +="<tr>";
}
});
$("#todos").html(str);
// 1페이지인 경우 이전버튼 클릭 불가능
if(curpage==1) {
$("#prev").attr("disabled",true);
}else {
$("#prev").attr("disabled",false);
}
// 현재페이지가 마지막페이지 일때 다음버튼 클릭불가능
if(curpage==lastPage){
$("#next").attr("disabled",true);
}else {
$("#next").attr("disabled",false);
}
}
});
};
</script>
</html>
앞게시글 게시글관리 와 비슷하다. table 을 사용해서 완료 체크박스를 넣고 할일을 구분했다. 나머지는 똑같다.
댓글남기기