[Javascript] Table 테이블 tr 개수, td 접근

■ Javascript Table 테이블 tr 개수, td 접근

---

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>성별</th>
    </tr>
  </thead>
  <tbody id="tmp_table_body">
    <tr>
      <td>홍길동</td>
      <td>23</td>
      <td>남자</td>
    </tr>
    <tr>
      <td>김영희</td>
      <td>25</td>
      <td>여자</td>
    </tr>
  </tbody>
</table>

 

■ id값(class, name도 가능)을 통해 Table tr, td 영역 개수 및 컬럼값을 가져올 수 있음

<script type="text/javascript">
  $(document).ready(function(){
    var rows = document.getElementById("tmp_table_body").getElementsByTagName("tr");
    console.log(rows.length);	// tbody tr 개수 = 2
	
    // tr만큼 루프돌면서 컬럼값 접근
    for( var r=0; r<rows.length; r++ ){
      var cells = rows[r].getElementsByTagName("td");

      var cell_1 = cells[0].firstChild.data;		// 이름
      var cell_2 = cells[1].firstChild.data;		// 나이
      var cell_3 = cells[2].firstChild.data;		// 성별

      console.log(cell_1);	// 홍길동, 김영희
      console.log(cell_2);	// 23, 25
      console.log(cell_3);	// 남자,여자
    }
  });
</script>