728x90
반응형
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<title>내 스케줄</title>
<style>
td {
width: 100px;
height: 100px;
color: black;
}
tr>td:first-child>p,
tr>th:first-child>p {
color: red;
}
tr>td:last-child>p,
tr>th:last-child>p {
color: blue;
}
td>p:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div>
날짜 : <input type="text" id="date" readonly /> <br />
내용 : <input type="text" id="content" /> <br />
<button type="button" onclick="writeSchedule();">작성</button> <br />
</div>
<div style="font-size: 2em; color: green; text-align: center">
2022년 7월
</div>
<br />
<table align="center" width="500" style="text-align: center">
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
<tr>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
<td>
<p>1</p>
</td>
<td>
<p>2</p>
</td>
</tr>
<tr>
<td>
<p>3</p>
</td>
<td>
<p>4</p>
</td>
<td>
<p>5</p>
</td>
<td>
<p>6</p>
</td>
<td>
<p>7</p>
</td>
<td>
<p>8</p>
</td>
<td>
<p>9</p>
</td>
</tr>
<tr>
<td>
<p>10</p>
</td>
<td>
<p>11</p>
</td>
<td>
<p>12</p>
</td>
<td>
<p>13</p>
</td>
<td>
<p>14</p>
</td>
<td>
<p>15</p>
</td>
<td>
<p>16</p>
</td>
</tr>
<tr>
<td>
<p>17</p>
</td>
<td>
<p>18</p>
</td>
<td>
<p>19</p>
</td>
<td>
<p>20</p>
</td>
<td>
<p>21</p>
</td>
<td>
<p>22</p>
</td>
<td>
<p>23</p>
</td>
</tr>
<tr>
<td>
<p>24</p>
</td>
<td>
<p>25</p>
</td>
<td>
<p>26</p>
</td>
<td>
<p>27</p>
</td>
<td>
<p>28</p>
</td>
<td>
<p>29</p>
</td>
<td>
<p>30</p>
</td>
</tr>
<tr>
<td>
<p>31</p>
</td>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
<td>
<p></p>
</td>
</tr>
</table>
<script>
let target; // target을 전연 변수로 만들어서 다른 곳에서도 사용가능
$('td > p').on("click", function(){
console.log(this);
// 날짜만 가져오려면 this의 text값을 가져와야 함
console.log($(this).text());
$('#date').val($(this).text()) //this값을 date에 넣음
target = this; // target에 this값을 준다.
})
function writeSchedule(){
let content = $('#content').val(); //content변수로 value값을 받음
$(target).parent().append("<span>" + content + "</span><br>"); //target의 부모에 <span>" + content + "</span><br>를 주어서 값을 입력
//초기화
// 초기화
$('#content').val(""); // ''을 주어서 초기화
$('#date').val("");
}
</script>
</body>
</html>
Script문을 보면 캘린더의 숫자를 클릭했을 리스너 이벤트가 발동하고, 작성 버튼을 클릭했을 때 함수가 작동한다.
반응형
'웹 개발' 카테고리의 다른 글
| [포스코X코딩온] 반응형 웹(Responsive Web) (0) | 2023.11.11 |
|---|---|
| [포스코X코딩온] 개발 모델, Git 협업 과정과 Branch (0) | 2023.11.08 |
| [포스코X코딩온] jQuery (0) | 2023.11.07 |
| [포스코X코딩온] JavaScript 사칙연산 계산기 만들기 (0) | 2023.11.06 |
| [포스코X코딩온] 방명록 만들기 실습 (0) | 2023.11.04 |