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

WBOY
풀어 주다: 2016-05-16 17:45:02
원래의
1045명이 탐색했습니다.

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

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


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



🎜>



td>ccc




🎜> ><script> <br>window.onload = function () { <br>var oTable = document.getElementById('tableTest') <br>var oTbody = oTable.tBodies[0]; document.getElementById('sort'); <br>var arr = [];//각 A tr을 저장하는 데 사용됩니다. <br>var isAsc = true; // 오름차순 또는 내림차순을 결정하는 데 사용됩니다. <br>oBtn.onclick = function () { <br>for (var i = 0; i arr[i] = oTbody.rows[i];//여기서 각 tr은 다음 위치에 저장됩니다. 정렬 기준이 아닌 배열(여기서는cells[0].innerHTML입니다) <br>} <br> //배열은cells[0].innerHTML에 따라 정렬됩니다. <br>arr.sort(function(td1 , td2){ <br>if(isAsc) { <br>returnparseInt(td1.cells[0].innerHTML) -parseInt(td2.cells[0].innerHTML)<br>} else { <br>return parseInt(td2.cells[0].innerHTML) -parseInt(td1.cells[0].innerHTML); <br>} <br>}) <br>//정렬된 tr을 tbody에 다시 삽입 <br>for( var j =0; j < arr.length; j ) { <BR>oTbody.appendChild(arr[ j]) <BR>} <BR>//오름차순, 내림차순 판단 <BR>isAsc ; <BR>} <BR>} <BR></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( ):
3 ccc
요소(있는 경우)에 대한 포인터를 보유합니다.
tBodies:
요소를 생성하여 테이블에 넣고 참조를 반환합니다.
deleteTHead():
요소를 삭제합니다.
deleteRow(pos): 지정된 위치에서 행을 삭제합니다.
insertRow(pos): 행 컬렉션의 지정된 위치에 행을 삽입합니다.
속성 및 tbody와 관련된 메소드 :
rows : tbody의 모든 행을 보유하는 HTMLCollection
deleteRow(pos): 지정된 위치의 행을 삭제합니다.
insertRow(pos): 지정된 위치에 행을 삽입합니다. 행 컬렉션의 위치를 ​​지정하고 새로 삽입된 행에 대한 참조를 반환합니다
tr 속성 및 메서드 정보:
cells: tr의 모든 td(셀)를 저장하는 HTMLCollection
deleteCell(pos ): 지정된 위치의 셀을 삭제합니다
insetCell(pos ): 셀 컬렉션의 지정된 위치에 셀을 삽입하고 해당 셀에 대한 참조를 반환합니다
OK, 그게 전부입니다…
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!