- ベストアンサー
JavaScriptで簡単に順位を上下反転する方法
- JavaScriptを使用して、簡単に順位を上下反転させることができます。
- 以下のテーブルのフィールド行（項目名）を最上位で固定し、チェックボックスを使って順位を上下反転させることができます。
- また、CSSやVanilla JS（jQuery不要）を使用して実装することができます。
- retorofan
- お礼率86% (336/388)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<input type="checkbox" id="menu" onclick="let t=table1.tBodies[0];t.append(...[...t.rows].reverse());">逆順</div>
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> body { counter-reset: rank 0;} #table1 tbody tr td:first-of-type:before { counter-increment: rank 1; content: counter(rank) " 位"; } </style> <body> <div><input type="checkbox" id="menu" onclick=" table1.tBodies[0].append(...[...table1.tBodies[0].rows].map(a=>[parseFloat(a.cells[2].textContent),a]).sort(([a],[b])=>(a-b)*(this.checked*2-1)).map(a=>a[1])); ">逆順</div> <table id="table1" border="1"> <caption>ビタミンC 含有量トップ10</caption> <thead> <tr><th>順位<th>野菜名<th>含有量 (mg) <tbody> <tr><td><td>ピーマン(トマピー)<td>200 <tr><td><td>赤ピーマン(パプリカ)<td>170 <tr><td><td>芽キャベツ<td>160 <tr><td><td>黄ピーマン(パプリカ)<td>150 <tr><td><td>オレンジピーマン(パプリカ) <td>150 <tr><td><td>ブロッコリー<td>140 <tr><td><td>とうがらし<td>120 <tr><td><td>パセリ<td>120 <tr><td><td>なばな<td>110 <tr><td><td>カリフラワー<td>81 </table>
お礼
ご回答ありがとうございます。 とてもＣＯＯＬなコードでお見事！