css代码:
*{margin:0;padding:0;}
.gaga_tb{margin:30px;}
.gaga_tb tr th,.gaga_tb tr td{height:30px;border:1px solid #ccc;text-align:center;}
js代码:
function gaga_x(arr,e){
// 冒泡法
for(var i = 0;i<arr.length;i++){
for(var j = i;j<arr.length;j++){
function fengz(){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
var temp1 = $(tb_tr).eq(i).html();
$(tb_tr).eq(i).html( $(tb_tr).eq(j).html() );
$(tb_tr).eq(j).html(temp1);
}
if(e){
if( arr[i] < arr[j] ){
fengz();
}
}else{
if( arr[i] > arr[j] ){
fengz();
};
};
};
};
};
var tb_tr = $(".gaga_tb tr");
var arr = new Array($(tb_tr).length);
for(var i = 0 ;i < $(tb_tr).length;i++){
arr[i] = $(tb_tr).eq(i).find("td:last").text() -0; // 查找到最后一个td里面的内容 转换为number类型
}
$(function(){
$(".gaga input").click(function(){
if( $(this).hasClass("big") ){
gaga_x(arr,"big");
}else{
gaga_x(arr);
}
});
});
html代码:
<div class="gaga" id="gaga">
<input type="button" value="从大到小排序" class="big" />
<input type="button" value="从小到大排序" class="small" />
<table class="gaga_tb" width="30%">
<tr>
<th>尜尜</th>
<th>尜尜</th>
<th>尜尜</th>
<th>尜尜</th>
<th>序号</th>
</tr>
<tr>
<td>尜尜</td>
<td>尜尜</td>
<td>尜尜</td>
<td>尜尜</td>
<td>105</td>
</tr>
<tr>
<td>尜尜</td>
<td>尜尜</td>
<td>尜尜</td>
<td>尜尜</td>
<td>5</td>
</tr>
<tr>
<td>gaga</td>
<td>12sfds</td>
<td>12sfds</td>
<td>12sfds</td>
<td>30</td>
</tr>
<tr>
<td>czvca</td>
<td>12sfds</td>
<td>12sfds</td>
<td>12sfds</td>
<td>2</td>
</tr>
<tr>
<td>vczvcz</td>
<td>12sfds</td>
<td>asf</td>
<td>12sfds</td>
<td>80</td>
</tr>
<tr>
<td>12sfds</td>
<td>12s12f45a4fdsafds</td>
<td>12sfds</td>
<td>12sfds</td>
<td>20</td>
</tr>
</table>
</div>
最后还得加上这个<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>