자바스크립트 - 테이블 행 값 가져오기

misonaru·2023년 3월 24일

1. 배열로 가져오기

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

2.개별로 가져오기

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();
profile
미소와 나루 집사

0개의 댓글