반응형
HTML 테이블의 행 수를 가져 오는 JavaScript
JavaScript로 table
ID와 이름 이있는 HTML의 행 수를 얻는 방법은 무엇입니까?
원래:
var rows = document.getElementById(tableId).getElementsByTagName("tr").length;
또는 <tbody>
중간에있는 경우
var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
.rows
속성을 사용하고 다음 과 같이 확인할 수 있습니다 .length
.
var rowCount = document.getElementById('myTableID').rows.length;
$('tableName').find('tr').length
이것은 Jquery를 사용 tbody
하고 데이터와 함께 행만 가져오고 desconsidering하는 또 다른 옵션 thead/tfoot
입니다.
$ ( "# tableId> tbody> tr"). length
console.log($("#myTableId > tbody > tr").length);
.demo {
width:100%;
height:100%;
border:1px solid #C0C0C0;
border-collapse:collapse;
border-spacing:2px;
padding:5px;
}
.demo caption {
caption-side:top;
text-align:center;
}
.demo th {
border:1px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
.demo td {
border:1px solid #C0C0C0;
text-align:left;
padding:5px;
background:#FFFFFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTableId" class="demo">
<caption>Table 1</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=4 style="background:#F0F0F0"> </td>
</tr>
</tfoot>
</table>
테이블에 다음이있는 경우 ID
:
const tableObject = document.getElementById(tableId);
const rowCount = tableObject[1].childElementCount;
테이블에 다음이있는 경우 Class
:
const tableObject = document.getElementsByClassName(tableClass);
const rowCount = tableObject[1].childElementCount;
테이블에 다음이있는 경우 Name
:
const tableObject = document.getElementsByTagName('table');
const rowCount = tableObject[1].childElementCount;
참고 : 색인 1
은 <tbody>
태그를 나타냅니다.
참고 URL : https://stackoverflow.com/questions/3053503/javascript-to-get-rows-count-of-a-html-table
반응형
'Development Tip' 카테고리의 다른 글
FBSDK 로그인 오류 코드 : Objective-C의 308 (0) | 2020.12.13 |
---|---|
Javascript의 함수에 이벤트 객체를 전달하는 방법은 무엇입니까? (0) | 2020.12.13 |
webWorker에서 localStorage에 액세스 (0) | 2020.12.13 |
Django : 쿼리를 통해 열 값의 합계 계산 (0) | 2020.12.13 |
phpmyadmin 파일 크기가 너무 커서 데이터베이스를 가져올 수 없습니다. (0) | 2020.12.13 |