现在又一个页面，里面有个table表数据，大致的表格如下
-------------------------------
| 姓名 | ..... | 得分 |
--------------------------------
| 张三 | ..... | 1000 |
--------------------------------
| 李四 | ..... | 4490 |
--------------------------------
| 王五 | ..... | 8760 |
--------------------------------
这里的得分人员手工打分的，现在的需求就是，当把这些人的得分都打好以后，
我点击一个按钮，这个按钮实现的功能就是: 将这些数据按照得分由高到低的顺序
排个序。这是PM要求的，我JS不在行，我说我在后台做吧，他说就用JS 省资源，顺便
让我学习一下，求朋友们给答案，就是那个按钮的具体代码活着详细的思路也行。
------解决方案--------------------
- HTML code
<!doctype html>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
<ul id="ul">
<li>小王<em>74</em></li>
<li>小李<em>65</em></li>
<li>小张<em>56</em></li>
<li>小周<em>84</em></li>
<li>小艾<em>63</em></li>
</ul>
<script>
function $(o){return document.getElementById(o)}
function makeArray( obj ){
var arr = [];
for ( var i = 0, len = obj.length; i < len; i++ ){
arr.push(obj[i]);
}
return arr;
}
function asc( x, y ){ //升序
return parseInt( x.innerHTML ) - parseInt( y.innerHTML );
}
function makeOrder( wrapper, obj, order ){
var order = order || 'asc';
var wrapper = $( wrapper );
var obj = wrapper.getElementsByTagName( obj );
var arr;
arr = makeArray( obj ); // 将对象转为数组
if ( order == 'asc' ){
arr.sort( asc );
} else {
arr.sort( asc ).reverse();
}
for( var i = 0, len = arr.length; i < len; i++ ){
wrapper.appendChild( arr[i].parentNode )
}
}
makeOrder( 'ul', 'em', 'asc' )
</script>
</body>
</html>
------解决方案--------------------
- HTML code
<ul id="ul">
<li>小王<em>74</em></li>
<li>小李<em>65</em></li>
<li>小张<em>56</em></li>
<li>小周<em>84</em></li>
<li>小艾<em>63</em></li>
</ul>
<input type="button" value="TEST" onclick="sortTable()">
<script type=text/javascript>
function sortTable() {
var obj = document.getElementById("ul");
var arr = obj.innerHTML.match(/<li.*?\/em>/gi); //注意：IE浏览器innerHTML会遗漏n-1个“</li>”标签
arr.sort(function(a, b) {
var reg = function(o){return o.replace(/(?![^>]+(?=<\/)).+?/g, "")};
return reg(b) - reg(a)
});
obj.innerHTML = arr.join("</li>") + "</li>";
}
</script>
------解决方案--------------------
var reg = reg || function(o){return o.replace(/(?![^>]+(?=<\/)).+?/g, "")};
------解决方案--------------------
- HTML code
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
table{
width: 600px;
border-collapse:collapse;
text-align: center;
}
table,th, td{
border: 1px solid black;
}
td input{
width: 100%;
border: none;
}
</style>
</head>
<body>
<form>
<table>
<thead>
<tr>
<th>姓名</th>
<th>得分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td><input class="score" type="text" value="0" /></td>
</tr>
<tr>
<td>李四</td>
<td><input class="score" type="text" value="0" /></td>
</tr>
<tr>
<td>王五</td>
<td><input class="score" type="text" value="0" /></td>
</tr>
</tbody>
</table>
<input id="order_btn" type="button" value="order"/>
</form>
<script>
document.getElementById("order_btn").onclick = function(){
var callee = arguments.callee;
if(!callee.tableOrder){
callee.tableOrder = new TableOrder(this.parentNode.getElementsByTagName("table")[0]);
}
callee.tableOrder.makeOrder("score", "asc");
}
function TableOrder(table){
this.init = function(){
this.tbody = table.getElementsByTagName("tbody")[0];
this.trs = this.tbody.children;
}
this.makeOrder = function(clazz, order){
var arr = Array.prototype.slice.call(this.trs, 0);
arr.sort(function(arg1, arg2){
var factor = 1, value1 = 0, value2 = 0;
if(order === "asc"){
factor = 1;
}else if(order === "desc"){
factor = -1;
}
value1 = parseInt(getElementsByClassName(arg1, clazz)[0].value);
value2 = parseInt(getElementsByClassName(arg2, clazz)[0].value);
console.log((value1 - value2) * factor);
return (value1 - value2) * factor;
});
var fragment = document.createDocumentFragment();
for(var i = 0, len = arr.length; i < len; i++){
fragment.appendChild(arr[i]);
}
this.tbody.innerHTML = "";
this.tbody.appendChild(fragment);
}
function getElementsByClassName(elem, clazz){
if(elem.getElementsByClassName){
return Array.prototype.slice.call(elem.getElementsByClassName(clazz), 0);
}else{
var childrens = elem.getElementsByTagName("*"),
reg = new RegExp("\b" + clazz + "\b"),
result = [];
reg.complie();
for(var i = 0, len = childrens.length; i < len; i++){
if(reg.test(childrens[i].className)){
result.push(childrens[i]);
}
}
return result;
}
}
this.init();
}
</script>
</body>
</html>