ドキュメント <br>window.onload = function(){<br> var input = document.querySelectorAll('input');<br> var table = document.querySelector('table');<br> var rows = table.tBodies[0].rows;<br> var arrRows = [];<br> /* 配列はソートしかできないので、tr をすべて配列に入れます*/<br> for(var i = 0; i 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> // //ソート順に、 -put tr into tbody<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 の 1 番目に従ってセルの内容を並べ替えます<br> }) ;<br> arrRows.forEach(function(tr){<br> //trを数字順にtbodyに置き換える<br> table.tBodies[0].appendChild(tr); <br> });<br> }<br>}; <br></script> ;<br/></head><br><body><br><table border="1" width="400" align="center"><br> <thead><br> <tr><br> <th>フルーツ< /th><br> </p> <th>gt;単価(￥)</th> <br> <br> <br> <tbody> <br> <tr> <br> <th>Apple</th> <br> <th>54.5</th> <br> </tr> <br> <tr> <br> <th>オレンジ</th> <br> <th>24.5</th> <br> </tr> <br> <tr><br> <th>スイカ</th><br> <th>33.8</th><br> </tr><br> < < tdcolspan="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> </tbody>
