新着順になっているテーブルを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>
クリックでのソートはいりません。表示したときにソートするのみで結構です
よろしくお願いします
No.2ベストアンサー
- 回答日時:
(c.querySelector ('*') || c).textContent = (m === t)
No.1
- 回答日時:
<!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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
テーブルで複数行をまとめて非...
-
<td>の中のonClick="location" で
-
JavaScriptでテーブルをクリッ...
-
ハイパーリンクを別ウインドウ...
-
動的なtableの値を取得したい
-
プルダウンで選択すると、DBの...
-
JSで、テーブルのある行のみ、...
-
JavaScriptで特定のtdタグにcla...
-
ポップアップメニュー
-
至急!GetElementById でtdの...
-
sed を使って文字列削除
-
【秀丸マクロ】検索行と、その...
-
jquery datatablesを使用 イン...
-
CSVデータをツリー表示させたい
-
「オブジェクトは、このプロパ...
-
テーブルの項目の値取得
-
\\u30ad\\u30fc\\u30dc・・・と...
-
return trueとreturn falseの用...
-
追加ボタンを押した際に ok ボ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
マウスをブラウザの外に出した...
-
JavaScriptで特定のtdタグにcla...
-
特定<table>内の<td>の色を変える
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
プルダウンで選択すると、DBの...
-
至急!GetElementById でtdの...
-
【UWSC】HTML内のある部分を抽...
-
javascript クリックすると、あ...
-
jsで質問です。 displayプロパ...
-
javascriptで質問です。 displa...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
別ページからOnclickでテーブル...
-
スクロールバーの表示位置を変...
-
JavaScriptでテーブルをクリッ...
-
Selenium.ChromeDriverの使い方...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
おすすめ情報