Jqueryはテーブルの列を選択し、テーブルの実装をソートしますprinciple_jquery

フロントエンドにはテーブルを並べ替えるための Jquery プラグインが多数あり、その機能も非常に強力です。たとえば、Jquery Data Tables はテーブルの並べ替え、検索、ページングなどの操作を行うことができます。表がありますが、実現原理については詳しく調べていません。

フロントエンドでテーブルをソートする原理をより深く理解し、Jquery をさらに学ぶために、Jquery を使用してテーブルをソートする小さな関数を実装することにしました。

この実装の主なアイデアは次のとおりです: マウスでクリックされたヘッダー セルの列番号を取得し、データ行を走査し、各

内の html を取得し、各 の下の html を取得します。 取得した列番号のタグ内の内容に対応し、 のhtml、の内容を取得します。 ;、 の型が取得され、属性値が文字列に結合されて配列に追加され、テーブル 内のすべての HTML が空白になります。異なる type 属性値に従って の内容を比較するために使用され、比較結果に基づいて配列をソートし、ソートされた配列要素を空の 。列がすでにソートされている場合は、配列を直接反転します。数値、文字列、IP アドレスの 3 種類の並べ替えルールが提供されます。文字列型の並べ替えルールは、中国語の文字列の並べ替えをサポートする JavaScript の localeCompare メソッドを使用しますが、残念ながら、このメソッドは Google Chrome とは互換性がありません。そのため、Google Chromeでの中国語の文字列のソート結果が正しくなくなります。

HTML コード リスト:

コードをコピー コードは次のとおりです:

View Code

序号	书名	价格（元）	出版时间	印刷量（册）	IP
1	狼图腾	29.80	2009-10	50000	192.168.1.125
2	孝心不能等待	29.80	2009-09	800	192.68.1.125
3	藏地密码2	28.00	2008-10		192.102.0.12
4	藏地密码1	24.80	2008-10		215.34.126.10
5	设计模式之禅	69.00	2011-12		192.168.1.5
6	轻量级 Java EE 企业应用实战	99.00	2012-04	5000	192.358.1.125
7	Java 开发实战经典	79.80	2012-01	2000	192.168.1.25
8	Java Web 开发实战经典	69.80	2011-11	2500	215.168.54.125

tableSort.js コードリスト:

コードをコピー🎜> コードは次のとおりです。

コードの表示

$(document).ready(function(){
var tableObject = $('#tableSort '); //id tableSort のテーブル オブジェクトを取得します
var tbHead = tableObject.children('thead'); //テーブル オブジェクトの下のヘッドを取得します
var tbHeadTh = tbHead.find('tr th') ;// tr の下の th を取得します
var tbBody = tableObject.children('tbody');//テーブル オブジェクトの下の tbody を取得します
var tbBodyTr = tbBody.find('tr');// tbody を取得しますtr の下の tr
var sortIndex = -1;
tbHeadTh.each(function() {//thead の tr の下の th をトラバースします
var thisIndex = tbHeadTh.index($(this));// th が配置されている列番号を取得します。
$(this).mouseover(function(){
tbBodyTr.each(function(){//tbody の下の tr を照合します。
var tds = $(this)。 find ("td");//列番号がパラメータのインデックスである td オブジェクト コレクションを取得します
$(tds[thisIndex]).addClass("hover");
}); .mouseout( function(){
tbBodyTr.each(function(){
var tds = $(this).find("td");
$(tds[thisIndex]).removeClass(" hover") ;
});
});
$(this).click(function() {
var dataType = $(this).attr("type");
checkColumnValue( thisIndex, dataType);
});
$("tbody tr").removeClass();//まず tbody
$ の下の tr のすべての CSS クラスを削除します。 (" tbody tr").mouseover(function(){
$(this).addClass("hover");
}).mouseout(function(){
$(this).removeClass( "hover ");
});
//テーブルを並べ替えます
function checkColumnValue(index, type) {
var trsValue = new Array(); ) {
var tds = $(this).find('td');
trsValue.push(type ".separator" $(tds[index]).html() ".separator" $(this ).html());
$(this).html("");
var len == sortIndex; >trsValue .reverse();
} else {
for(var i = 0; i type = trsValue[i].split(".separator")[0 ];
for(var j = i 1; j value1 = trsValue[i].split(".separator")[1];
value2 = trsValue[j] ].split(".separator")[1];
if(type == "number"){
value1 = value1 == "" ?
value2 = value2 == " " ? 0 : value2;
if(parseFloat(value1) > parseFloat(value2)){
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[ i] = temp;
}
} else if(type == "ip"){
if(ip2int(value1) > ip2int(value2)){
var temp = trsValue [j ];
trsValue[j] = trsValue[i];
}
} else {
if (value1.localeCompare(value2) > 0) {//このメソッドは Google Chrome と互換性がありません。
var temp = trsValue[j]
trsValue[i] = temp; }
}
}
}
}
for(var i = 0; i $("tbody tr:eq(" i ") ").html(trsValue[i].split(".separator")[2]);
}
sortIndex =index;
}
//IP を整数に変換
関数ip2int( ip){
var num = 0;
ip = ip.split(".");
num = Number(ip[0]) * 256 * 256 * 256 Number(ip[1] ]) * 256 * 256 Number(ip[2]) * 256 Number(ip[3]);
return num
}
})


実行結果:


ネチズン「Xia の Hanfeng」に感謝します。「Xia の Hanfeng」の助けなしに JQuery 関連の操作を完了するのは困難です。この効果にはまだ非常に満足していますが、実装された操作で文字列を結合するプロセスは少し面倒で、単純かつ明確ではないため、改善する必要があります。