🎜> ><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 등을 통해 관련 노드를 얻을 수 있다는 것은 모두가 알고 있습니다. 테이블에서 물론 이 방법도 구현할 수 있습니다 분명히 이 작업은 매우 번거로울 것입니다 따라서 다른 메소드와 속성을 사용하여 테이블을 조작할 수 있습니다. 그 전에 테이블에 대해 이야기해 보겠습니다. 동동: 테이블을 작성할 때 다음과 같이 직접 작성할 사람이 많을 것입니다.
코드 복사
코드는 다음과 같습니다.
3
ccc
Firebug로 코드를 확인해 보면 여분의 tbody가 있을 텐데 소스코드가 당연히 없다는 걸 알 수 있습니다. 왜 그럴까요? ! 사실 테이블의 실제 구조는 다음과 같습니다. table에는 thead, tbody, tfoot도 포함되며 그 중 tbody는 여러 개가 될 수 있습니다. 주제로 돌아가기: Javascript의 테이블 정보 요소의 속성 및 메소드: caption:
요소(있는 경우)에 대한 포인터를 보유합니다. tBodies:
요소의 HTMLCollection입니다. tFoot: < ;tfoot> 요소에 대한 포인터(있는 경우) tHead: 요소에 대한 포인터(있는 경우) rows: 테이블에 있는 모든 행의 HTMLCollection입니다. createTHead() : < thead> 요소를 생성하여 테이블에 넣고 참조 createTFoot()를 반환합니다. createCaption() 요소를 생성하여 테이블에 넣습니다.
요소를 생성하여 테이블에 넣고 참조를 반환합니다. deleteTHead():
요소를 삭제합니다. deleteTFoot(): 요소를 삭제합니다. deleteCaption( ):
요소를 삭제합니다. deleteRow(pos): 지정된 위치에서 행을 삭제합니다. insertRow(pos): 행 컬렉션의 지정된 위치에 행을 삽입합니다. 속성 및 tbody와 관련된 메소드 : rows : tbody의 모든 행을 보유하는 HTMLCollection deleteRow(pos): 지정된 위치의 행을 삭제합니다. insertRow(pos): 지정된 위치에 행을 삽입합니다. 행 컬렉션의 위치를 지정하고 새로 삽입된 행에 대한 참조를 반환합니다 tr 속성 및 메서드 정보: cells: tr의 모든 td(셀)를 저장하는 HTMLCollection deleteCell(pos ): 지정된 위치의 셀을 삭제합니다 insetCell(pos ): 셀 컬렉션의 지정된 위치에 셀을 삽입하고 해당 셀에 대한 참조를 반환합니다 OK, 그게 전부입니다…