如何让表格按特定内容自动排序？

[bnw007]

如：
编号 姓名　性别　
１ 01 男
２ 02 男
３ 03　　男
４ 04　　女
５ 05 女

把02的性别改成女后该行自动排到最后，变成

编号 姓名　性别　
１ 01 男
3 03 男
4 04　　女
5 05　　女
2 02 女

[sukey00]

应该不可以吧，在数据库里，主键ID 是自动按数字排列的！

[bnw007]

对了．就像比分网站．完场了自动移到最后那样．．

[cxty]

静态的那就是javascript的事情咯!

[cxty]

<SCRIPT LANGUAGE="JavaScript">
<!--
/*----------------------------------------------------------------------------| Table Sort |
|-----------------------------------------------------------------------------|
| Created by Erik Arvidsson |
| (http://webfx.eae.net/contact.html#erik) |
| For WebFX (http://webfx.eae.net/) |
|-----------------------------------------------------------------------------|
| A DOM 1 based script that allows an ordinary HTML table to be sortable. |
|-----------------------------------------------------------------------------|
| Copyright (c) 1998 - 2002 Erik Arvidsson |
|-----------------------------------------------------------------------------|
| 1998-??-?? | First version |
|-----------------------------------------------------------------------------|
| Created 1998-??-?? | All changes are in the log above. | Updated 2001-??-?? |
\----------------------------------------------------------------------------*/

var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;

if (ie5 || dom)
initSortTable();

function initSortTable() {
arrowUp = document.createElement("SPAN");
var tn = document.createTextNode("5");
arrowUp.appendChild(tn);
arrowUp.className = "arrow";

arrowDown = document.createElement("SPAN");
var tn = document.createTextNode("6");
arrowDown.appendChild(tn);
arrowDown.className = "arrow";
}



function sortTable(tableNode, nCol, bDesc, sType) {
var tBody = tableNode.tBodies[0];
var trs = tBody.rows;
var trl= trs.length;
var a = new Array();

for (var i = 0; i < trl; i++) {
a[i] = trs[i];
}

var start = new Date;
window.status = "Sorting data...";
a.sort(compareByColumn(nCol,bDesc,sType));
window.status = "Sorting data done";

for (var i = 0; i < trl; i++) {
tBody.appendChild(a[i]);
window.status = "Updating row " + (i + 1) + " of " + trl +
" (Time spent: " + (new Date - start) + "ms)";
}

// check for onsort
if (typeof tableNode.onsort == "string")
tableNode.onsort = new Function("", tableNode.onsort);
if (typeof tableNode.onsort == "function")
tableNode.onsort();
}

function CaseInsensitiveString(s) {
return String(s).toUpperCase();
}

function parseDate(s) {
return Date.parse(s.replace(/\-/g, '/'));
}

/* alternative to number function
* This one is slower but can handle non numerical characters in
* the string allow strings like the follow (as well as a lot more)
* to be used:
* "1,000,000"
* "1 000 000"
* "100cm"
*/

function toNumber(s) {
return Number(s.replace(/[^0-9\.]/g, ""));
}

function compareByColumn(nCol, bDescending, sType) {
var c = nCol;
var d = bDescending;

var fTypeCast = String;

if (sType == "Number")
fTypeCast = Number;
else if (sType == "Date")
fTypeCast = parseDate;
else if (sType == "CaseInsensitiveString")
fTypeCast = CaseInsensitiveString;

return function (n1, n2) {
if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
return d ? -1 : +1;
if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
return d ? +1 : -1;
return 0;
};
}

function sortColumnWithHold(e) {
// find table element
var el = ie5 ? e.srcElement : e.target;
var table = getParent(el, "TABLE");

// backup old cursor and onclick
var oldCursor = table.style.cursor;
var oldClick = table.onclick;

// change cursor and onclick
table.style.cursor = "wait";
table.onclick = null;

// the event object is destroyed after this thread but we only need
// the srcElement and/or the target
var fakeEvent = {srcElement : e.srcElement, target : e.target};

// call sortColumn in a new thread to allow the ui thread to be updated
// with the cursor/onclick
window.setTimeout(function () {
sortColumn(fakeEvent);
// once done resore cursor and onclick
table.style.cursor = oldCursor;
table.onclick = oldClick;
}, 100);
}

function sortColumn(e) {
var tmp = e.target ? e.target : e.srcElement;
var tHeadParent = getParent(tmp, "THEAD");
var el = getParent(tmp, "TD");

if (tHeadParent == null)
return;

if (el != null) {
var p = el.parentNode;
var i;

// typecast to Boolean
el._descending = !Boolean(el._descending);

if (tHeadParent.arrow != null) {
if (tHeadParent.arrow.parentNode != el) {
tHeadParent.arrow.parentNode._descending = null; //reset sort order
}
tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
}

if (el._descending)
tHeadParent.arrow = arrowUp.cloneNode(true);
else
tHeadParent.arrow = arrowDown.cloneNode(true);

el.appendChild(tHeadParent.arrow);



// get the index of the td
var cells = p.cells;
var l = cells.length;
for (i = 0; i < l; i++) {
if (cells[i] == el) break;
}

var table = getParent(el, "TABLE");
// can't fail

sortTable(table,i,el._descending, el.getAttribute("type"));
}
}


function getInnerText(el) {
if (ie5) return el.innerText; //Not needed but it is faster

var str = "";

var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str += getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}

}

return str;
}

function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
//-->
</SCRIPT>

[MonkeyDHua]

简单方法，数据库再加一个ID2，不要自动编号，专门用来排序，order by ID2 不就行了，你想怎么排就怎么排

[孟子E章]

sql = "select * from tb order by 性别"

[51windows]

是从数据库读出的吗？

如果是就用order by 性别

如果静态的

可用
http://www.51windows.net/hw/asp/jsview.asp?id=271
中的方法

在<body 中加上

onload=性别所在的td的id.click()来实现排列

[vvfish119]

用order by 性别

[bnw007]

不好意思．．我的表达不够清楚．．
我的意思是：原来表格是按id(自动编号，不等于编号)来排列的．改成女后自动排到最后．其他数据不变．怎样实现呢？