重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

tableソート

解決済

  • 質問者：flash0
  • 質問日時：
  • 回答数：2件

新着順になっているテーブルをjqueryで名前ごとにまとめることはできますか？

スレ　　　名前　　　日時
ああ　　　　ここ　　 2014/1/31
いい　　　　たた　　　2014/1/20
ああ　　　　ここ　　 2014/1/10
ああ　　　　ここ　　 2014/1/01

こんな感じにしたいです
ああ　　　　ここ　　 2014/1/31
└　　　　 ここ　　 2014/1/10
└　　　　 ここ　　 2014/1/01
いい　　　　たた　　　2014/1/20


html
<table width="100%">
<tr>
<th>スレ</th>
<th>なまえ</th>
<th>新着日時</th>
</tr>
<tbody>
<tr><td>ああ</td><td>test1</td><td>2014/01/31</td></tr>
<tr><td>いい</td><td>test2</td><td>2014/01/20</td></tr>
<tr><td>ああ</td><td>test3</td><td>2014/01/10</td></tr>
<tr><td>ああ</td><td>test4</td><td>2014/01/01</td></tr>
</tbody>
</table>

クリックでのソートはいりません。表示したときにソートするのみで結構です

よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

(c.querySelector ('*') || c).textContent = (m === t)

    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございました
やってみます

通報する
お礼日時：2014/01/27 18:16

No.1

  • 回答者： babu_baboo
  • 回答日時：

<!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>

この回答への補足

何度もすいません。できればリンクも表示できるようにできますか？

補足日時：2014/01/21 01:57
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます
形としては理想に近いのですが肝心のリンクが消えてました
最初にリンクも表示するべきでした（あんまり重要と思わなかったので。すいません）

<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>

通報する
お礼日時：2014/01/21 01:55

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報