私は（JavaScriptで）テーブルソートソリューションを求めていますが、まだ適切なソリューションを見つけることができないようです。各列をアルファベット順に並べ替えるのに必要です。コードや数字を無視したり、通貨を操作したりする必要はありません。列ヘッダーをクリックするだけで、ソートされたaz/zaから切り替わります。
誰かがこのような本当に簡単な解決策を知っていますか？
質問する
212313 次
16 に答える
82
テーブルを行ごとに並べ替えるコードをいくつか書きました。ただし、セルが 1 つだけで、セルにcolspan<tbody>がないことを前提としています。
function sortTable(table, col, reverse) {
var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
i;
reverse = -((+reverse) || -1);
tr = tr.sort(function (a, b) { // sort rows
return reverse // `-1 *` if want opposite order
* (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
.localeCompare(b.cells[col].textContent.trim())
);
});
for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}
// sortTable(tableNode, columId, false);
上記の仮定をしたくない場合は、それぞれの状況でどのように動作するかを検討する必要があります。(たとえば、すべてを 1 つにまとめる<tbody>か、先行するすべてのcolspan値を合計するなど)
次に、これを各テーブルに添付できます。たとえば、タイトルが<thead>
function makeSortable(table) {
var th = table.tHead, i;
th && (th = th.rows[0]) && (th = th.cells);
if (th) i = th.length;
else return; // if no `<thead>` then do nothing
while (--i >= 0) (function (i) {
var dir = 1;
th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
}(i));
}
function makeAllSortable(parent) {
parent = parent || document.body;
var t = parent.getElementsByTagName('table'), i = t.length;
while (--i >= 0) makeSortable(t[i]);
}
makeAllSortable 次に、 onloadを呼び出します。
テーブルでの作業の例フィドル。
于 2013-01-10T22:15:06.637 に答える
48
Nick Grealy の受け入れられた答えは素晴らしいですが、行がタグ内にある場合は少し風変わりです<tbody>(最初の行はソートされず、行をソートした後は tbody タグの外側になり、書式設定が失われる可能性があります)。
ただし、これは簡単な修正です。
変更するだけです：
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
に：
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
const tbody = table.querySelector('tbody');
Array.from(tbody.querySelectorAll('tr'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => tbody.appendChild(tr) );
于 2018-12-21T06:53:39.273 に答える
8
「単に並べ替える」以上のことを行いますが、dataTables.netは必要なことを行います。私は毎日それを使用しており、十分にサポートされており、非常に高速です（jQueryが必要です）
DataTablesは、jQueryJavascriptライブラリのプラグインです。これは、プログレッシブエンハンスメントの基盤に基づく非常に柔軟なツールであり、高度なインタラクションコントロールを任意のHTMLテーブルに追加します。
Google Visualizationsは別のオプションですが、dataTablesよりも少し多くの設定が必要ですが、特定のフレームワーク/ライブラリ（google.visualizations以外）は必要ありません。
http://code.google.com/apis/ajax/playground/?type=visualization#table
そして、他のオプションがあります...特に他のJSフレームワークの1つを使用している場合。Dojo、Prototypeなどはすべて、最小限のテーブル並べ替え機能を提供する使用可能な「テーブル拡張」プラグインを備えています。多くの人がもっと多くを提供しますが、私は言い直します...私はまだdatatables.netほど強力で速いものに出くわしていません。
于 2013-01-10T21:43:40.270 に答える
4
sortjson 配列と関数を扱うことができます。これは、操作が非常に簡単で保守可能な構造です (例: 並べ替え)。
テストされていませんが、ここにアイデアがあります。並べ替える順序で列を配置する配列を渡すと、複数の順序付けと順次順序付けがサポートされます。
var DATA_TABLE = {
{name: 'George', lastname: 'Blarr', age:45},
{name: 'Bob', lastname: 'Arr', age: 20}
//...
};
function sortDataTable(arrayColNames, asc) { // if not asc, desc
for (var i=0;i<arrayColNames.length;i++) {
var columnName = arrayColNames[i];
DATA_TABLE = DATA_TABLE.sort(function(a,b){
if (asc) {
return (a[columnName] > b[columnName]) ? 1 : -1;
} else {
return (a[columnName] < b[columnName]) ? 1 : -1;
}
});
}
}
function updateHTMLTable() {
// update innerHTML / textContent according to DATA_TABLE
// Note: textContent for firefox, innerHTML for others
}
ここで、姓、名前、年齢の順に並べる必要があるとします。
var orderAsc = true;
sortDataTable(['lastname', 'name', 'age'], orderAsc);
次のような結果になるはずです。
{name: 'Jack', lastname: 'Ahrl', age: 20},
{name: 'Jack', lastname: 'Ahrl', age: 22},
//...
于 2013-01-10T21:46:11.877 に答える
4
Here is a complete example using pure JavaScript. The algorithm used for sorting is basically BubbleSort. Here is a Fiddle.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function sort(ascending, columnClassName, tableId) {
var tbody = document.getElementById(tableId).getElementsByTagName(
"tbody")[0];
var rows = tbody.getElementsByTagName("tr");
var unsorted = true;
while (unsorted) {
unsorted = false
for (var r = 0; r < rows.length - 1; r++) {
var row = rows[r];
var nextRow = rows[r + 1];
var value = row.getElementsByClassName(columnClassName)[0].innerHTML;
var nextValue = nextRow.getElementsByClassName(columnClassName)[0].innerHTML;
value = value.replace(',', '.'); // in case a comma is used in float number
nextValue = nextValue.replace(',', '.');
if (!isNaN(value)) {
value = parseFloat(value);
nextValue = parseFloat(nextValue);
}
if (ascending ? value > nextValue : value < nextValue) {
tbody.insertBefore(nextRow, row);
unsorted = true;
}
}
}
};
</script>
</head>
<body>
<table id="content-table">
<thead>
<tr>
<th class="id">ID <a
href="javascript:sort(true, 'id', 'content-table');">asc</a> <a
href="javascript:sort(false, 'id', 'content-table');">des</a>
</th>
<th class="country">Country <a
href="javascript:sort(true, 'country', 'content-table');">asc</a> <a
href="javascript:sort(false, 'country', 'content-table');">des</a>
</th>
<th class="some-fact">Some fact <a
href="javascript:sort(true, 'some-fact', 'content-table');">asc</a>
<a href="javascript:sort(false, 'some-fact', 'content-table');">des</a>
<th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">001</td>
<td class="country">Germany</td>
<td class="some-fact">16.405</td>
</tr>
<tr>
<td class="id">002</td>
<td class="country">France</td>
<td class="some-fact">10.625</td>
</tr>
<tr>
<td class="id">003</td>
<td class="country">UK</td>
<td class="some-fact">15.04</td>
</tr>
<tr>
<td class="id">004</td>
<td class="country">China</td>
<td class="some-fact">13.536</td>
</tr>
</tbody>
</table>
</body>
</html>
You can also check out the source from here: https://github.com/wmentzel/table-sort
于 2016-06-04T19:23:44.363 に答える