집 >웹 프론트엔드 >JS 튜토리얼 >Javascript는 간단한 테이블 정렬 및 테이블 작업을 구현합니다.

Javascript는 간단한 테이블 정렬 및 테이블 작업을 구현합니다.

WBOY원래의: 2016-05-16 17:45:021068검색

이 예에서는 주로 tBodies, 행, 셀 및 배열 정렬 방법을 포함한 테이블 작업을 연습했습니다. sort
먼저 코드:

복사 코드 코드는 다음과 같습니다.

메타 charset="utf-8">
테이블 정렬

🎜>

td>ccc

🎜> ><script> window.onload = function () { var oTable = document.getElementById('tableTest') var oTbody = oTable.tBodies[0]; document.getElementById('sort'); var arr = [];//각 A tr을 저장하는 데 사용됩니다. var isAsc = true; // 오름차순 또는 내림차순을 결정하는 데 사용됩니다. oBtn.onclick = function () { for (var i = 0; i arr[i] = oTbody.rows[i];//여기서 각 tr은 다음 위치에 저장됩니다. 정렬 기준이 아닌 배열(여기서는cells[0].innerHTML입니다) } //배열은cells[0].innerHTML에 따라 정렬됩니다. arr.sort(function(td1 , td2){ if(isAsc) { returnparseInt(td1.cells[0].innerHTML) -parseInt(td2.cells[0].innerHTML) } else { return parseInt(td2.cells[0].innerHTML) -parseInt(td1.cells[0].innerHTML); } }) //정렬된 tr을 tbody에 다시 삽입 for( var j =0; j < arr.length; j ) { oTbody.appendChild(arr[ j]) } //오름차순, 내림차순 판단 isAsc ; } } </script>

다음은 관련 지식입니다. 🎜>일반 DOM을 운영할 때 getElementsByTagName, getElementById 등을 통해 관련 노드를 얻을 수 있다는 것은 모두가 알고 있습니다.
테이블에서 물론 이 방법도 구현할 수 있습니다
분명히 이 작업은 매우 번거로울 것입니다
따라서 다른 메소드와 속성을 사용하여 테이블을 조작할 수 있습니다.
그 전에 테이블에 대해 이야기해 보겠습니다. 동동:
테이블을 작성할 때 다음과 같이 직접 작성할 사람이 많을 것입니다.

코드 복사

코드는 다음과 같습니다.

bbb
eee	🎜>
ddd< td>
;/td>

Firebug로 코드를 확인해 보면 여분의 tbody가 있을 텐데 소스코드가 당연히 없다는 걸 알 수 있습니다.
왜 그럴까요? !
사실 테이블의 실제 구조는 다음과 같습니다. table에는 thead, tbody, tfoot도 포함되며 그 중 tbody는 여러 개가 될 수 있습니다.
주제로 돌아가기:
Javascript의 테이블 정보 요소의 속성 및 메소드:
caption: 요소의 HTMLCollection입니다.
tFoot: < ;tfoot> 요소에 대한 포인터(있는 경우)
tHead: 요소에 대한 포인터(있는 경우)
rows: 테이블에 있는 모든 행의 HTMLCollection입니다.
createTHead() : < thead> 요소를 생성하여 테이블에 넣고 참조
createTFoot()를 반환합니다.
createCaption() 요소를 생성하여 테이블에 넣습니다. 요소를 삭제합니다.
deleteTFoot(): 요소를 삭제합니다.
deleteCaption( ):

요소(있는 경우)에 대한 포인터를 보유합니다.
tBodies:
3	ccc

Javascript는 간단한 테이블 정렬 및 테이블 작업을 구현합니다.

관련 기사