이전글
https://greed-yb.tistory.com/333
[JavaScript] CheckBox 전체 선택, 전체 해제 하기
이름 번호 흰둥이1 000-0000-0000 흰둥이2 111-1111-1111 핵심은 동일한 name 을 주고 제어를 해주면 된다
greed-yb.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table border="1">
<thead>
<tr>
<th style="width: 10%"><input type="checkbox" name="checkAll" onclick="checkAll(this)"></th>
<th style="width: 30%">이름</th>
<th style="width: 20%">번호</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center"><input type="checkbox" name="checkB" onclick="clickData(this)"></td>
<td><input type="text" name="nameText"/></td>
<td><input type="text" name="numText" /></td>
</tr>
<tr>
<td style="text-align: center"><input type="checkbox" name="checkB" onclick="clickData(this)"></td>
<td><input type="text" name="nameText" /></td>
<td><input type="text" name="numText" /></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
function clickData(e){
let row = $(e).closest("tr"); // 본인을 기준으로 tr 태그를 찾는다
let clickName = row.find("input[name=nameText]").val(); // 부모격인 tr 안에서 찾고 싶은 태그를 find 한다
let clickNum = row.find("input[name=numText]").val(); // 부모격인 tr 안에서 찾고 싶은 태그를 find 한다
console.log("clickName = " + clickName);
console.log("clickNum = " + clickNum);
}
</script>
</html>
closest 와 find 를 이용하면
Dom 구조를 파악하기 좋다
이전글과 현재글을 응용하면
행추가 및 행삭제, 클릭한 행의 데이터만 전송 등 여러 가지를 할 수 있다
'개발 > JavaScript' 카테고리의 다른 글
| [JavaScript] CheckBox 전체 선택, 전체 해제 하기 (0) | 2025.02.23 |
|---|---|
| [JavaScript] 파일선택 시 이미지 미리보기(FileReader) (0) | 2025.02.22 |
| [JavaScript] jQuery 를 이용한 Enter key 적용하기 (0) | 2024.08.02 |
| [JavaScript] document.form.submit() 사용하기 (0) | 2024.07.10 |
| [JavaScript] setInterval() 함수 사용하기 (0) | 2023.07.30 |
댓글