- ベストアンサー
HTMLテーブルを名前ごとにまとめる方法とは？
- HTMLテーブルの新着順になっているテーブルをjqueryを使用して名前ごとにまとめる方法を教えてください。
- テーブルの内容を、名前ごとにグループ化して表示する方法を教えてください。
- HTMLテーブルを表示した際に、名前ごとにまとめてソートする方法を教えてください。
- flash0
- お礼率97% (297/306)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> tbody { width: 100%; } </style> <body> <table width="100%"> <thead> <tr> <th>スレ<th>なまえ<th>新着日時 </thead> <tbody> <tr><td>ああ<td>test1<td>2014/01/31 <tr><td>いい<td>test2<td>2014/01/20 <tr><td>ああ<td>test3<td>2014/01/10 <tr><td>ああ<td>test4<td>2014/01/01 </tbody> </table> <script> function toAry (nodeList) { return Array.prototype.slice.call (nodeList, 0); } function A (idx, direction, samestr) { var func = B (idx, direction); var append = function (n) { this.appendChild (n); } var same = C (idx, samestr || '└'); return function (tbody) { toAry (tbody.querySelectorAll ('tr')) .sort (func) .forEach (append, tbody); toAry (tbody.querySelectorAll ('tr')) .forEach (same); }; } function B (index, direction) { return !! direction ? function (a, b) { var av = a.cells[index].textContent; var bv = b.cells[index].textContent; return (av === bv) ? false : (isNaN (av) || isNaN (bv)) ? av < bv : parseFloat (av) < parseFloat (bv); } : function (a, b) { var av = a.cells[index].textContent; var bv = b.cells[index].textContent; return (av === bv) ? false : (isNaN (av) || isNaN (bv)) ? av > bv : parseFloat (av) > parseFloat (bv); }; } function C (idx, str) { var m = null; return function (tr) { var c = tr.cells[idx]; var t = c.textContent; c.textContent = (m === t) ? str : (m = t); } } toAry (document.querySelectorAll ('tbody')).forEach (A (0)); </script>
お礼
回答ありがとうございます 形としては理想に近いのですが肝心のリンクが消えてました 最初にリンクも表示するべきでした（あんまり重要と思わなかったので。すいません） <table width="100%"> <tr> <th>スレ</th> <th>なまえ</th> <th>新着日時</th> </tr> <tbody> <tr><td><a href="bbs.php?id=2">ああ</a></td><td>test1</td><td>2014/01/31</td></tr> <tr><td><a href="bbs.php?id=1">いい</a></td><td>test2</td><td>2014/01/20</td></tr> <tr><td><a href="bbs.php?id=2">ああ</a></td><td>test3</td><td>2014/01/10</td></tr> <tr><td><a href="bbs.php?id=2">ああ</a></td><td>test4</td><td>2014/01/01</td></tr> </tbody> </table>
補足
何度もすいません。できればリンクも表示できるようにできますか？
お礼
回答ありがとうございました やってみます