안녕하세요! 오늘은 자바스크립트의 rows collection과 cells collection을 이용하여 클릭 된 행의 값을 가져와보겠습니다.
우선 자바스크립트 코드와 함께 사용할 html 과 css 코드를 작성해보겠습니다.
row_value.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[자바스크립트]row 클릭 시 값 가져오기</title>
<style>
table {
border:1px solid;
text-align:center;
margin: auto;
}
table thead tr {
background:gray;
color:white;
}
table tbody tr:hover {
background-color: lightgray;
cursor:pointer;
}
td {
border:1px solid
}
th {
border:1px solid
}
p {
margin:auto;
margin-top:30px;
text-align:center;
}
</style>
</head>
<body>
<table id='testTable'>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>지역</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>김ㅇㅇ</td>
<td>40</td>
<td>경기도</td>
<td>75</td>
</tr>
<tr>
<td>2</td>
<td>이ㅇㅇ</td>
<td>24</td>
<td>충청남도</td>
<td>85</td>
</tr>
<tr>
<td>3</td>
<td>박ㅇㅇ</td>
<td>26</td>
<td>전라북도</td>
<td>90</td>
</tr>
</tbody>
</table>
<p>
</p>
</body>
</html>
getRowValue.js
function rowClicked() {
var table =document.getElementById('testTable');
var rowList = table.rows; // *1)rows collection
for (i=1; i<rowList.length; i++) {//thead부분 제외.
var row = rowList[i];
var tdsNum = row.childElementCount;// 자식요소 갯수 구하기.
row.onclick = function(){
return function(){
var str = "";
for (var j = 0; j < tdsNum; j++){//row안에 있는 값 순차대로 가져오기.
var row_value = this.cells[j].innerHTML; //*2)cells collection
str += row_value+' ';//값을 하나의 text값으로 만듦
};//td for
document.querySelector('p').innerText =str;//p태그 안에 값 넣어주기.
};//return
}(row);//onclick
}//for
}//function
window.onload = rowClicked();
위와 같이 작성 후 행을 클릭하면 아래와 같이 동작되는 것을 확인할 수 있습니다.
또는 아래와 같이 값을 가져올 수 있습니다.
getRowValue_2.js
function rowClicked2() {
var table =document.getElementById('testTable');
var rowList = table.rows;
for (i=1; i<rowList.length; i++) {//thead부분 제외.
var row = rowList[i];
var str = "";
row.onclick = function(){
return function(){
//개별적으로 값 가져오기
var number =this.cells[0].innerHTML; //번호
var name = this.cells[1].innerHTML; //이름
var age = this.cells[2].innerHTML;//나이
var region = this.cells[3].innerHTML;//지역
var score = this.cells[4].innerHTML;//점수
str =
"번호:"+number+"/ 이름:"+name+
"/ 나이:"+age+"/지역:"+region+
"/ 점수:"+score
document.querySelector('p').innerText =str;
};//return
}(row);//onclick
}//for
}//function
window.onload = rowClicked2();
이 경우에는 이렇게 동작하는 것을 확인할 수 있습니다.
아래는 위 코드와 관련한 참고자료입니다.
*1) : https://www.w3schools.com/jsref/coll_table_rows.asp
HTML DOM Table rows Collection
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
*2) https://www.w3schools.com/jsref/coll_table_cells.asp
HTML DOM Table cells Collection
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] 문자열 모든 공백 제거하기 (0) | 2022.09.02 |
|---|---|
| [ JavaScript ] 테이블 동적 행 추가/삭제하기 (0) | 2022.08.31 |
| [JavaScript] 파일 드래그 앤 드롭하기 (0) | 2022.08.22 |
| [JavaScript] 현재 브라우저가 실행되고 있는 운영체제 이름을 가져오기 (0) | 2022.08.18 |
| [Javascript] 작업 시간 측정하기 (0) | 2022.08.05 |
