문서 <br>window.onload = function(){<br> var input = document.querySelectorAll('input');<br> var table = document.querySelector('table');<br> var 행 = table.tBodies[0].rows;<br> var arrRows = [];<br> /* 배열은 정렬만 가능하므로 모든 tr 을 배열에 넣습니다*/<br> for(var i = 0; i < 행 .length ; i++){<br/> arrRows.push(rows[i]);<br/> }<br/> // arrRows.sort(function(a,b){<br/> // return b.cells[1].innerHTML - a.cells[ 1] .innerHTML;<br/> // //tr<br/>의 첫 번째 셀 내용에 따라 정렬 // });<br/> // arrRows.forEach(function(tr){<br/> // //정렬 순서대로 , re -tbody에 tr 넣기<br/> // table.tBodies[0].appendChild(tr);<br/> // });<br/> //console.log(arrRows);<br/> input[0].onclick = function(){ <br/> arrRows .sort(function(a,b){<br/> return b.cells[1].innerHTML - a.cells[1].innerHTML;<br/> //tr<br/> });<br/> arrRows의 첫 번째 셀 내용에 따라 정렬 .forEach(function(tr){<br/> //tr을 숫자 순서대로 tbody로 교체<br/> table.tBodies[0].appendChild(tr);<br/> });<br/> }<br/> input[ 1].onclick = function() {<br/> arrRows.sort(function(a,b){<br/> return a.cells[1].innerHTML - b.cells[1].innerHTML;<br/> //tr의 첫 번째에 따라 셀의 내용을 정렬<br/> }) ;<br/> arrRows.forEach(function(tr){<br/> //tr을 숫자 순서대로 tbody로 바꿉니다<br/> table.tBodies[0].appendChild(tr); <br/> });<br/> }<br/>}; ;<br/></head><br><body><br><table border="1" width="400" align="center"><br> <thead><br> <tr><br> <th>과일< /th><br/> <th>단가(엔)</th><br/> </tr><br/> </thead><br/> <tbody><br/> <tr><br/> <th>Apple</th> <br/> <일>54.5</일><br/> </tr><br/> <tr><br/> <일>주황색</th><br/> <일>24.5</일><br/> </tr><br> <tr><br> <th>수박</th><br> <th>33.8</th><br> </tr><br> < < td colspan="2" style="text-align: center; "><br> <input type="button" value="가격이 높은 순으로 정렬됩니다."><br> <input type="button" value= "가격이 낮은 순으로 정렬됩니다."><br> </ td><br> </tr><br> </tfoot><br></table> <br></body><br></html><br></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
