现在又一个页面，里面有个table表数据，大致的表格如下-------------------------------
| 姓名 | ..... | 得分 |
--------------------------------
| 张三 | ..... | 1000 |
--------------------------------
| 李四 | ..... | 4490 |
--------------------------------
| 王五 | ..... | 8760 |
--------------------------------
这里的得分人员手工打分的，现在的需求就是，当把这些人的得分都打好以后，
我点击一个按钮，这个按钮实现的功能就是: 将这些数据按照得分由高到低的顺序
排个序。这是PM要求的，我JS不在行，我说我在后台做吧，他说就用JS 省资源，顺便
让我学习一下，求朋友们给答案，就是那个按钮的具体代码活着详细的思路也行。
| 姓名 | ..... | 得分 |
--------------------------------
| 张三 | ..... | 1000 |
--------------------------------
| 李四 | ..... | 4490 |
--------------------------------
| 王五 | ..... | 8760 |
--------------------------------
这里的得分人员手工打分的，现在的需求就是，当把这些人的得分都打好以后，
我点击一个按钮，这个按钮实现的功能就是: 将这些数据按照得分由高到低的顺序
排个序。这是PM要求的，我JS不在行，我说我在后台做吧，他说就用JS 省资源，顺便
让我学习一下，求朋友们给答案，就是那个按钮的具体代码活着详细的思路也行。
<!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>楼主参考下
先说声巨大的感谢，其实我想加你为好友，但是系统提示我没有权限，我勒个汗啊。
CSDN我都上了这么长时间了，为什么还加不了呢 ?
<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>
<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 = reg || function(o){return o.replace(/(?![^>]+(?=<\/)).+?/g, "")};
return reg(b) - reg(a)
});
obj.innerHTML = arr.join("</li>") + "</li>";
}
</script>
谢谢prototype。 看你这名字就知道你是正规JS部队出身。
<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>
function sortTable(){
var obj = document.getElementById("ul").getElementsByTagName('li');
obj = Array.prototype.slice.call(obj, 0);
obj.sort(function(a, b){
var reg = function(o){
return o.getElementsByTagName('em')[0].innerHTML
};
return reg(b) - reg(a)
});
// console.log(obj)
document.getElementById("ul").innerHTML = '';
for (var i in obj) {
document.getElementById("ul").appendChild(obj[i])
}
}
哦，那就算拍马屁吧，我一直在这里等，一看有人回复了，就先感谢一般，，，，，以后改了这毛病。。 你写的这代码能给个思路吗？
像里面 arguments.callee;
Array.prototype.slice.call 等等关键字我可以百度解决。。
话说这代码里面 还真是新鲜，一堆没见过的关键字
不过你写的东西看半天啊
function sortTable2(){
var obj = document.getElementById("ul").getElementsByTagName('li');
if (window.ActiveXObject) {
var oo = [];
for (var i in obj) {
if (typeof obj[i] === 'object')
oo.push(obj[i]);
}
obj = oo
}
else {
obj = Array.prototype.slice.call(obj, 0);
}
obj.sort(function(a, b){
var reg = function(e){
return e.getElementsByTagName('em')[0].innerHTML
};
return reg(b) - reg(a)
});
// document.getElementById("ul").innerHTML = '';
for (var i in obj) {
document.getElementById("ul").appendChild(obj[i])
}
}<<javascript 王者归来>>第12.5.6节这里就是例子(代码很漂亮可以看看).
<html>
<head>
<title>Test</title>
<style>
table,th, td{
border: 1px solid black;
}
table{
table-layout: fixed;
width: 200px;
border-collapse:collapse;
text-align: center;
}
th{
width: 50%;
}
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(){
// arguments是参数对象，是传递给该函数的所有参数以及一些函数运行时属性的集合
// arguments.callee是该函数本身的引用
var callee = arguments.callee;
// 将TableOrder的实例保存在该函数对象中(类似静态变量)，以避免多次创建对象，提高效率。(注：函数是一个有函数体的特殊对象)
if(!callee.tableOrder){
callee.tableOrder = new TableOrder(this.parentNode.getElementsByTagName("table")[0]);
}
callee.tableOrder.makeOrder("score", "desc");
}
function TableOrder(table){
// 初始化方法，类似构造器
this.init = function(){
this.tbody = table.getElementsByTagName("tbody")[0];
this.trs = this.tbody.children;
}
this.makeOrder = function(clazz, order){
// this.trs是个NodeList对象，是个伪数组，将其转化成数组
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);
return (value1 - value2) * factor;
});
// createDocumentFragment自己搜吧，主要是用来减少页面reflow和repaint，提高效率
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>
<html>
<head>
<title>Test</title>
<style>
table,th, td{
border: 1px solid black;
}
table{
table-layout: fixed;
width: 200px;
border-collapse:collapse;
text-align: center;
}
th{
width: 50%;
}
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(){
// arguments是参数对象，是传递给该函数的所有参数以及一些函数运行时属性的集合
// arguments.callee是该函数本身的引用
var callee = arguments.callee;
// 将TableOrder的实例保存在该函数对象中(类似静态变量)，以避免多次创建对象，提高效率。(注：函数是一个有函数体的特殊对象)
if(!callee.tableOrder){
callee.tableOrder = new Table(this.parentNode.getElementsByTagName("table")[0]);
}
callee.tableOrder.makeOrder("score", "desc");
}
function Table(){
// 初始化方法，类似构造器
this.init = function(table){
this.table = table;
}
this.makeOrder = function(clazz, order){
var trs = this.getRows(),
arr = toArray(trs);
arr = this.sort(arr, clazz, order);
this.rebuildTbody(arr);
}
this.getRows = function(){
return this.table.tBodies[0].children;
}
this.sort = function(arr, clazz, order){
// 调用数组排序方法
var factor = 1, value1 = 0, value2 = 0;
if(order === "asc"){
factor = 1;
}else if(order === "desc"){
factor = -1;
}
return arr.sort(function(arg1, arg2){
value1 = parseInt(getElementsByClassName(arg1, clazz)[0].value);
value2 = parseInt(getElementsByClassName(arg2, clazz)[0].value);
return (value1 - value2) * factor;
});
}
this.rebuildTbody = function(trs){
// createDocumentFragment自己搜吧，主要是用来减少页面reflow和repaint，提高效率
var fragment = document.createDocumentFragment(),
tbody = document.createElement("tbody");
for(var i = 0, len = trs.length; i < len; i++){
fragment.appendChild(trs[i]);
}
tbody.appendChild(fragment);
this.table.replaceChild(tbody, this.table.tBodies[0]);
}
function getElementsByClassName(elem, clazz){
if(elem.getElementsByClassName){
return toArray(elem.getElementsByClassName(clazz));
}else{
var childrens = elem.getElementsByTagName("*"),
reg = new RegExp(),
result = [];
reg.compile("\\b" + clazz + "\\b");
for(var i = 0, len = childrens.length; i < len; i++){
if(reg.test(childrens[i].className)){
result.push(childrens[i]);
}
}
return result;
}
}
function toArray(obj){
try{
return Array.prototype.slice.call(obj, 0);
}catch(e){
var result = [];
for(var i = 0, len = obj.length; i < len; i++){
result.push(obj[i]);
}
return result;
}
}
this.init.apply(this, arguments);
}
</script>
</body>
</html>