按字段，给table的行【排序】

Question

有个table大概如下:<table border>
<tr>
  <th>...</th>
  ...
</tr><tr>
  <td>...</td>
  ...
<tr>...</table>
现在希望，当点击table的表头时，
根据该列的取值，对table的各行排序。

Answer 1

这个网上还是很多的。网上搜 js表格排序。cloudgame那记得有个的。

Answer 2

可以参考这个table排序效果

Answer 3

放到数组里面 然后sort() .
再根据数组调整顺序 。

Answer 4

排序数据源，重新构建table

Answer 5

根据js中存的数据重新排序数据然后重新生成html元素添加到table中就行了

Answer 6

extis   jquery等等 很多的插件

Answer 7

那个例子我也搜到了，但对新手还是不容易。
我照着它如下改了一下，
但为什么最后3列不能排序？part 1:<script>
eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-59cf-hj-mp-rt-yCG-NP-RT-Z]|[12]\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 $$,$$B,$$A,$$E,$$F,$$D,$$S;(4(){5 O,B,A,E,F,D,S;O=4(id){3"1I"==1q id?T.getElementById(id):id};O.extend=4(C,X){x(5 M Y X){C[M]=X[M]}3 C};O.deepextend=4(C,X){x(5 M Y X){5 15=X[M];c(C===15)continue;c(1q 15==="1J"){C[M]=1f.callee(C[M]||{},15)}v{C[M]=15}}3 C};B=(4(G){5 b={Z:/Z/.H(G)&&!/1r/.H(G),1r:/1r/.H(G),1K:/webkit/.H(G)&&!/1s/.H(G),1L:/1L/.H(G),1s:/1s/.H(G)};5 1g="";x(5 i Y b){c(b[i]){1g=i}}c(b.1K){1g="17"}b.17=parseInt((G.1M(eval("/(?:"+1g+")[\\\\/: ]([\\\\d.]+)/"))||[])[1]);b.ie=b.Z;b.1N=b.Z&&b.17==6;b.ie7=b.Z&&b.17==7;1O{b.1P=b.Z&&!!external.max_version}1Q(e){b.1P=I}3 b})(1t.navigator.userAgent.toLowerCase());A={isArray:4(1R){3 Object.1S.toString.J(1R)==="[1J 1T]"},1h:4(9,r,j){c(9.1h){9.1h(r,j)}v{x(5 i=0,w=9.U;i<w;i++){r.J(j,9[i],i,9)}}},10:4(9,r,j){c(9.10){3 9.10(r,j)}v{5 V=[];x(5 i=0,w=9.U;i<w;i++){r.J(j,9[i],i,9)&&V.1U(9[i])};3 V}},1u:4(9,r,j){c(9.1u){3 9.1u(r,j)}v{x(5 i=0,w=9.U;i<w;i++){c(!r.J(j,9[i],i,9))3 I};3 19}},1v:4(9,r,j){c(9.1v){3 9.1v(r,j)}v{x(5 i=0,w=9.U;i<w;i++){c(r.J(j,9[i],i,9))3 19};3 I}},1w:4(9,r,j){c(9.1w){3 9.1w(r,j)}v{5 V=[];x(5 i=0,w=9.U;i<w;i++){V.1U(r.J(j,9[i],i,9))};3 V}},1x:4(9,1y){c(9.1x){3 9.1x(1y)}v{5 V=[];x(5 i=0,w=9.U;i<w;i++){c(9[i]===1y)3 i};3-1}}};F=(4(){5 1a=1T.1S.1a;3{bind:4(1i,j){5 1j=1a.J(1f,2);3 4(){3 1i.1V(j,1j.1W(1a.J(1f)))}},bindAsEventListener:4(1i,j){5 1j=1a.J(1f,2);3 4(f){3 1i.1V(j,[E.K(f)].1W(1j))}}}})();D={1k:4(k){5 11=k?k.1X:T;3 1Y.1Z(11.20.21,11.22.21)},1l:4(k){5 11=k?k.1X:T;3 1Y.1Z(11.20.23,11.22.23)},1m:4(a,b){3(t.1m=a.1m?4(a,b){3 a!=b&&a.1m(b)}:4(a,b){3!!(a.compareDocumentPosition(b)&16)})(a,b)},u:4(k){5 l=0,L=0,N=0,P=0;c(!k.24||(B.ie&&B.17==8)){5 n=k;while(n){l+=n.offsetLeft,L+=n.offsetTop;n=n.offsetParent};N=l+k.offsetWidth;P=L+k.offsetHeight}v{5 u=k.24();l=N=t.1l(k);L=P=t.1k(k);l+=u.l;N+=u.N;L+=u.L;P+=u.P};3{"l":l,"L":L,"N":N,"P":P}},clientRect:4(k){5 u=t.u(k),1z=t.1l(k),1A=t.1k(k);u.l-=1z;u.N-=1z;u.L-=1A;u.P-=1A;3 u},25:4(h){3(t.25=T.1B?4(h){3 T.1B.26(h,27)}:4(h){3 h.1n})(h)},28:4(h,m){3(t.28=B.ie?4(h,m){5 g=h.1n;c(m=="W"){5 W=g.10.1M(/1C\\(W=(.*)\\)/i);c(W){5 o=parseFloat(W[1]);3 o?o/29:0}3 1};c(m=="2a"){m="2b"}5 12=g[m]||g[S.1D(m)];c(!/^\\-?\\d+(px)?$/i.H(12)&&/^\\-?\\d/.H(12)){g=h.g,l=g.l,2d=h.1E.l;h.1E.l=h.1n.l;g.l=12||0;12=g.pixelLeft+"px";g.l=l;h.1E.l=2d}3 12}:4(h,m){5 g=T.1B.26(h,27);3 m Y g?g[m]:g.getPropertyValue(m)})(h,m)},setStyle:4(1b,g,13){c(!1b.U){1b=[1b]}c(1q g=="1I"){5 s=g;g={};g[s]=13}A.1h(1b,4(h){x(5 m Y g){5 13=g[m];c(m=="W"&&B.ie){h.g.10=(h.1n.10||"").2e(/1C\\([^)]*\\)/,"")+"1C(W="+13*29+")"}v c(m=="2a"){h.g[B.ie?"2b":"cssFloat"]=13}v{h.g[S.1D(m)]=13}}})}};E=(4(){5 1c,1d,14=1;c(1t.2f){1c=4(p,q,y){p.2f(q,y,I)};1d=4(p,q,y){p.removeEventListener(q,y,I)}}v{1c=4(p,q,y){c(!y.$$14)y.$$14=14++;c(!p.Q)p.Q={};5 R=p.Q[q];c(!R){R=p.Q[q]={};c(p["on"+q]){R[0]=p["on"+q]}}R[y.$$14]=y;p["on"+q]=1o};1d=4(p,q,y){c(p.Q&&p.Q[q]){delete p.Q[q][y.$$14]}};4 1o(){5 1p=19,f=K();5 R=t.Q[f.q];x(5 i Y R){t.$$1o=R[i];c(t.$$1o(f)===I){1p=I}}3 1p}}4 K(f){c(f)3 f;f=1t.f;f.pageX=f.clientX+D.1l();f.pageY=f.clientY+D.1k();f.target=f.srcElement;f.1G=K.1G;f.1H=K.1H;c(f.q=="mouseout"){f.2g=f.toElement}v c(f.q=="mouseover"){f.2g=f.fromElement}3 f};K.1H=4(){t.1p=I};K.1G=4(){t.cancelBubble=19};3{"1c":1c,"1d":1d,"K":K}})();S={1D:4(s){3 s.2e(/-([a-z])/ig,4(all,2h){3 2h.toUpperCase()})}};c(B.1N){1O{T.execCommand("BackgroundImageCache",I,19)}1Q(e){}};$$=O;$$B=B;$$A=A;$$E=E;$$F=F;$$D=D;$$S=S})();',[],142,'|||return|function|var||||array|||if|||event|style|elem||thisp|node|left|name|||element|type|callback||this|rect|else|len|for|handler||||destination||||ua|test|false|call|fixEvent|top|property|right||bottom|events|handlers||document|length|res|opacity|source|in|msie|filter|doc|ret|value|guid|copy||version||true|slice|elems|addEvent|removeEvent||arguments|vMark|forEach|fun|args|getScrollTop|getScrollLeft|contains|currentStyle|handleEvent|returnValue|typeof|opera|chrome|window|every|some|map|indexOf|elt|sLeft|sTop|defaultView|alpha|camelize|runtimeStyle||stopPropagation|preventDefault|string|object|safari|firefox|match|ie6|try|maxthon|catch|obj|prototype|Array|push|apply|concat|ownerDocument|Math|max|documentElement|scrollTop|body|scrollLeft|getBoundingClientRect|curStyle|getComputedStyle|null|getStyle|100|float|styleFloat||rsLeft|replace|addEventListener|relatedTarget|letter'.split('|'),0,{}))
</script>

Answer 8

part 2:
<script type="text/javascript">
var TableOrder = function(table, options) {
this._checked = [];

var tBody = $$(table).tBodies[0];
this._tBody = tBody;
this._rows = $$A.map(tBody.rows, function(o){ return o; });

this._setOptions(options);
}
TableOrder.prototype = {
  _repair: $$B.ie6 || $$B.ie7,
  _setOptions: function(options) {
    this.options = {
index: 0,
property: "innerHTML",
type: "string",
desc: true,
compare: null,
value: null,
repair: this._repair,
onBegin: function(){},
onEnd: function(){}
    };
    $$.extend(this.options, options || {});
  },
  sort: function() {
if(!arguments.length){ return false };
var orders = Array.prototype.slice.call(arguments);
orders[0].onBegin();
this._rows.sort($$F.bind( this._compare, this, orders, 0 ));
var repair = this._repair && $$A.some(orders, function(o){ return o.repair; });
repair && this._getChecked();
var frag = document.createDocumentFragment();
$$A.forEach(this._rows, function(o){ frag.appendChild(o); });
this._tBody.appendChild(frag);
repair && this._setChecked();
orders[0].onEnd();
  },
  _compare: function(orders, i, tr1, tr2) {
var od = orders[i], value1 = this._value(od, tr1), value2 = this._value(od, tr2)
,result = od.compare ? od.compare(value1, value2) :
typeof value2 == "string" ? value1.localeCompare(value2) : (value1 - value2);
return !result && od[++i] ? this._compare(orders, i, tr1, tr2) : (od.desc ? -1 : 1) * result;
  },
  _value: function(order, tr) {
var td = tr.cells[order.index], att = order.property
,data = order.value ? order.value(td) :
att in td ? td[att] : td.getAttribute(att);
switch (order.type.toLowerCase()) {
case "int":
return parseInt(data, 10) || 0;
case "float":
return parseFloat(data, 10) || 0;
case "date":
return Date.parse(data) || 0;
case "bool":
return data === true || String(data).toLowerCase() == "true" ? 1 : 0;
case "string":
default:
return data.toString() || "";
}
  },
  creat: function(options) {
return $$.extend($$.extend({}, this.options), options || {});
  },
  _getChecked: function() {
this._checked = $$A.filter(this._tBody.getElementsByTagName("input"), function(o){
return (($$B.ie6 && o.type == "checkbox") || o.type == "radio") &&
o.checked != o.defaultChecked;
});
  },
  _setChecked: function() {
$$A.forEach(this._checked, function(o){ o.checked = !o.defaultChecked; });
  }
}
</script><style type="text/css">
.odTable {width:500px;border:1px solid #ebebeb;line-height:20px;font-size:12px;background:#FFF;}
.odTable thead {background-color:#ebebeb;}
.odTable span {color:#333;padding-right:15px;cursor:pointer;}
.odTable .desc, .odTable .asc {background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg) right center no-repeat;}
.odTable .desc {background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);}
</style>

Answer 9

part 3:
<table border="1" cellspacing="0" cellpadding="5" class="odTable" id="idTable">
<thead>
<tr>
                        <td><span id="idNum">ID</span></td>
                        <td><span id="idText">Name</span></td>
                        <td><span id="idCnt">Time</span></td>
                        <td><span id="idCnt">Size</span></td>                        <td><span id="idCnt">Cnt</span></td>
                        <td><span id="idText">Text</span></td>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td>new.htm</td>
<td align="center">20080912</td>
<td align="right">423</td>
                        <td>1</td>
                        <td>5</td>
</tr>
<tr>
<td align="center">2</td>
<td>Scroller.js</td>
<td align="center">20080923</td>
<td align="right">2</td>
                        <td>2</td>
                        <td>4</td>
</tr>
<tr>
<td align="center">3</td>
<td>AlertBox.js</td>
<td align="center">20080923</td>
<td align="right">348</td>
                        <td>3</td>
                        <td>3</td>
</tr>
<tr>
<td align="center">4</td>
<td>1.xml</td>
<td align="center">20081004</td>
<td align="right">1113</td>
                        <td>4</td>
                        <td>2</td>
</tr>
<tr>
<td align="center">5</td>
<td>4.xml</td>
<td align="center">20081004</td>
<td align="right">108</td>
                        <td>5</td>
                        <td>1</td>
</tr>
</tbody>
</table>
<br /><script type="text/javascript">
var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = [];function ClearCss(){ $$A.forEach(arrOrder, function(o){ o.className = ""; }); }function SetCheck(td){ return td.getElementsByTagName("input")[0].checked; }$$A.forEach([
["idNum", { type: "int" }],
["idText", { index: 1 }],
        ["idCnt", { index: 2, type: "int" }],
        ["idCnt", { index: 3, type: "int" }],
        ["idCnt", { index: 4, type: "int" }],
        ["idText", { index: 5 }],], function (arr){
var o = $$(arr[0]), order = to.creat(arr[1]);
order.onBegin = function(){ ClearCss(); odID.desc = this.desc; }
order.onEnd = function(){
o.className = this.desc ? "desc" : "asc";
this.desc = !this.desc;
}
o.onclick = function(){ to.sort(order, odID); }
arrOrder.push(o);
});</script>