这是一个简单的 javascript 函数，它将对任何标记元素集进行排序：
function sortElements(parentId, tagClass) {
var itemsToSort, p = document.getElementById(parentId);
if (p.getElementsByClassName) {
itemsToSort = p.getElementsByClassName(tagClass);
} else {
itemsToSort = getElementsByClassName(tagClass, "*", p);
}
// get all data into a sortable array
var data = [], order = [], item, placeHolder, i;
for (i = 0; i < itemsToSort.length; i++) {
item = itemsToSort[i];
// save position of item by inserting a placeholder right before it
placeHolder = document.createElement(item.tagName);
item.parentNode.insertBefore(placeHolder, item);
order.push(placeHolder);
// save item and text
data.push({obj: item, text: strTrim(item.innerHTML)});
}
// sort the item array by the text
data.sort(function(a, b) {
return(a.text.localeCompare(b.text));
});
// now reinsert items in sorted order
for (i = 0; i < data.length; i++) {
item = data[i].obj;
placeHolder = order[i];
// insert in new location
placeHolder.parentNode.insertBefore(item, placeHolder);
// remove placeholder
placeHolder.parentNode.removeChild(placeHolder);
}
}
function strTrim(str) {
return(str.replace(/^\s+/, "").replace(/\s+$/, ""));
}
// replacement for older versions of IE
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
您可以在这里看到它的工作原理：http: //jsfiddle.net/jfriend00/EztNw/。这个演示展示了它对 OP 的表格单元格和有序列表进行排序，只是为了表明该函数适用于任何一组元素。
我知道的唯一限制是标记元素不能是其他标记元素的子元素。适用于表格中的单元格。
如果需要旧版本的 IE，这也可以使用getElementsByClassName()，那么将添加一个替代品/垫片（包含在 jsFiddle 中）。
这是它的工作原理：
- 获取要排序的所有对象的列表
- 在每个项目当前所在的位置放置一个临时占位符对象，以便我们知道将事物按排序顺序放回哪里
- 构建要排序的对象数组和排序键（本例中为文本）
- 对该数组进行排序
- 按现在排序的顺序重新插入已排序的对象，使用占位符作为它们去向的指南 - 使用插槽后删除占位符
</p>