Development Tip

HTML 테이블의 행 수를 가져 오는 JavaScript

yourdevel 2020. 12. 13. 11:15
반응형

HTML 테이블의 행 수를 가져 오는 JavaScript


JavaScript로 tableID와 이름 이있는 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>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	</tbody>
  <tfoot>
  <tr>
  <td colspan=4 style="background:#F0F0F0">&nbsp; </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

반응형