並び替えは、絶対テーブルでしかできませんか。

質問

div要素でも並び替えがしたいです。
<div class="table">
<div class="row">
<div class="cell">内容1</div>
<div class="cell">内容2</div>
<div class="cell">内容3</div>
</div>
<div class="row">
<div class="cell">内容4</div>
<div class="cell">内容5</div>
<div class="cell">内容6</div>
</div>
</div>
<style>
#sort_table {
border-collapse:collapse;
}
#sort_table td {
border:1px solid lightgray;
}
#sort_table th {
cursor:pointer;
background-color:lightgray;
}
</style>
以上でもテーブルは作れます。しかし、これでは、並び替えができません。
https://blog.ver001.com/javascript-table-sort/
なぜなら通常はテーブル要素で書くからです。
しかしテーブルには弱点があり、<td>や<th>にしか、divや、pといったタグを置くことができません。
しかし、これだと、セルを変えることができません。
先ほどいただいた
<script>
function viewChange(){[Box1,Box2,Box3].forEach((a,b)=>a.style.display=sample.selectedIndex==b?'':'none')}
window.onload = viewChange;
</script>
というご回答だと、1つのテーブルしか表示が不可能です。
これがdivだと何個も表示ができますが、いかんせん並び替えができないのです。
jsだけで、プログラムのインストールなし、オフラインでかつ、ごちゃごちゃしたjqueryも使わないというのは贅沢な願望でしょうか。
後僕は天才ではないので、断片的な情報から組み合わせて１つのものを完成させる能力はないです。
お願いです。力をお貸しください。

回答No.1

dell_OK · ベストアンサー

divでも並び替えができそうです。

https://blog.ver001.com/javascript-table-sort/
こちらのサイトのコードをもとにdiv用に手直ししてみました。

<div class="table">
<div class="row">
<div class="cell">内容1</div>
<div class="cell">内容2</div>
<div class="cell">内容3</div>
</div>
<div class="row">
<div class="cell">内容4</div>
<div class="cell">内容5</div>
<div class="cell">内容6</div>
</div>
</div>
<style>
.table {
display: table;
width: 300px;
}

.cell {
display: table-cell;
width: 100px;
}
</style>
<script>
window.addEventListener('load', function () {
let column_no = 0; //今回クリックされた列番号
let column_no_prev = 0; //前回クリックされた列番号
document.querySelectorAll('.table div div').forEach(elm => {
elm.onclick = function () {
var cells = [].slice.call(this.parentNode.children);
column_no = cells.indexOf(this);
let table = this.parentNode.parentNode;
let sortType = 0; //0:数値 1:文字
let sortArray = new Array; //クリックした列のデータを全て格納する配列
var rows = [].slice.call(table.children);
for (let r = 0; r < rows.length - 1; r++) {
//行番号と値を配列に格納
let column = new Object;
column.row = rows[r];
column.value = [].slice.call(rows[r].children)[column_no].textContent;
sortArray.push(column);
//数値判定
if (isNaN(Number(column.value))) {
sortType = 1; //値が数値変換できなかった場合は文字列ソート
}
}
if (sortType == 0) { //数値ソート
if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート
sortArray.sort(compareNumberDesc);
} else {
sortArray.sort(compareNumber);
}
} else { //文字列ソート
if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート
sortArray.sort(compareStringDesc);
} else {
sortArray.sort(compareString);
}
}
//ソート後のTRオブジェクトを順番にtbodyへ追加（移動）
let tbody = this.parentNode.parentNode;
for (let i = 0; i < sortArray.length; i++) {
tbody.appendChild(sortArray[i].row);
}
//昇順／降順ソート切り替えのために列番号を保存
if (column_no_prev == column_no) {
column_no_prev = -1; //降順ソート
} else {
column_no_prev = column_no;
}
};
});
});
//数値ソート（昇順）
function compareNumber(a, b) {
return a.value - b.value;
}
//数値ソート（降順）
function compareNumberDesc(a, b) {
return b.value - a.value;
}
//文字列ソート（昇順）
function compareString(a, b) {
if (a.value < b.value) {
return -1;
} else {
return 1;
}
return 0;
}
//文字列ソート（降順）
function compareStringDesc(a, b) {
if (a.value > b.value) {
return -1;
} else {
return 1;
}
return 0;
}
</script>

お礼

貴重な情報ありがとうございます。